score:49

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.


Related Query

More Query from same tag