React - component will not render in foreach loop?

Question

I have a small application when you open a tab the React Route redirects to the given component (container). And from the container i want to render the child components. I use the foreach loop to go through a list that has the props that need to be given to the child. However, the child doesn't get rendered.

I don't want to use map because i use libraries that depend on the list class.

render() {   
    return ( 
        <div>
            {this.state.list.ForEach((element) => 
                <ChildComponent childName={element.name} 
        }
        </div> 
    );
}

}

Sulthan · Accepted Answer · 2019-05-19 10:22:47Z

62

You are confusing Array.forEach with Array.map. forEach does not return anything. The correct way is:

<div>
    {this.state.list.map((element, index) => 
        <ChildComponent key={index} childName={element.name} />
    )}
</div>

map converts the given element into another element, a component in this case. The result of calling map is an array of components that is then rendered. forEach always returns undefined therefore the result of your code is the same as writing:

<div>
   {undefined}
</div>

Note that key is also necessary when rendering lists of components.

edited May 19, 2019 at 10:22

answered Oct 15, 2017 at 8:40

Sulthan

130k23 gold badges223 silver badges277 bronze badges

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

1 Comment

Nithur Over a year ago

I am using map but still face the same issue. The element is of type never even though it has values.

Collectives™ on Stack Overflow

React - component will not render in foreach loop?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related