Реагировать на компонент, который не рендерится внутри .map с помощью оператора if

Question

Пожалуйста, помогите. У меня есть компонент, который я пытаюсь загрузить, если list.display = true. Я могу сделать консольный журнал, подтверждающий, когда список должен отображаться, и он работает правильно. Однако компонент не загружается. Если я возьму компонент из .map l oop, он работает отлично.

Спасибо

return (
        <div className="container"> 
            <h1>To Do App</h1>
            <p>Create a list:</p>
            <form>
                <label htmlFor="list">
                    <input type="text" name="list" id="list" onChange={e => setInputListName(e.target.value)}/>
                    <button onClick={addList}>Create List</button>
                </label>
            </form>

            <div className="listsContainer">
                {
                    lists.map( (list: listInterface, index:number) => 
                        (<button onClick={() => loadList(index)}>{list.listName}</button>)
                    )
                }
                {
                    lists.map( (list: listInterface, index:number) => {
                        if (list.display == true) {
                            <ToDoApp list={lists[0]} /> 
                            console.log("List " + list.listName + " ordered");
                        }
                    })
                }
            </div>
        </div>
    );

Answer 1

Я думаю, что вы полностью пропустили назначение функции javascript array::map, она должна возвращать значение для каждого элемента , для которого она вызывается. Он возвращает массив той же длины, что и итеративный массив. Вы на самом деле немного фильтруете свои результаты.

Фильтр / Карта - Фильтровать результаты массива затем сопоставить с реакцией JSX

{
  lists
    .filter((list: listInterface) => list.display) // exploit truthy/falsey display value
    .map((list: listInterface) => (
    <ToDoApp list={lists[0]} />
  ))
}

Reduce - Позволяет "фильтровать" результаты непосредственно в реакцию JSX

{
  lists.reduce((filteredLists: listsInterface, list: listInterface) => {
    if (list.display) {
      filteredLists.push(<ToDoApp list={lists[0]} />);
    }
    return filteredLists
  }, [])
}

Answer 2

Функция карты должна возвращать значение.

lists.map( (list: listInterface, index:number) => {
    if (list.display) {
        console.log("List " + list.listName + " ordered");
        return <ToDoApp list={lists[0]} /> 
        }
    })

Answer 3

    {
      lists.map((list: listInterface, index: number) => {
        if (list.display === true) {
         return <ToDoApp list={lists[0]} />

        }
      })
    }

добавить возврат в условие if для рендеринга JSX