React component not rendering inside .map with if statement

Question

Please help. I have a component that I am trying to load if list.display = true. I am able to do a console log confirming when the list should be displayed and it works properly. However, the component does not load. If I take the component out of the .map loop it works perfectly.

Thank you

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>
    );

Drew Reese · Accepted Answer · 2020-01-27 05:41:22Z

3

I think you completely miss the purpose of javascript's array::map function, it should return a value for every element it is called on. It returns an array that is the same length as the array it iterated over. You are actually filtering your results a bit.

Filter/Map - Filter array results then map to react JSX

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

Reduce - Allows to "filter" results directly into react JSX

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

answered Jan 27, 2020 at 5:41

Drew Reese

207k20 gold badges282 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leon · Accepted Answer · 2020-01-27 04:50:16Z

2

A map function need to return a value.

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

answered Jan 27, 2020 at 4:50

Leon

12.5k5 gold badges40 silver badges60 bronze badges

Comments

Kishan Jaiswal · Accepted Answer · 2020-01-27 04:57:27Z

0

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

        }
      })
    }

add return in the if condition to render the JSX

edited Jan 27, 2020 at 4:57

answered Jan 27, 2020 at 4:50

Kishan Jaiswal

6624 silver badges14 bronze badges

Collectives™ on Stack Overflow

React component not rendering inside .map with if statement

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related