Component in react doesnt execute in foreach loop

Question

const Course = props => {
  props.courses.forEach(course =>
  <Header name={course.name}/>
  )
  ...
} 

This code doesnt execute Header at all. If I change the loop to course => console.log(course.name) instead, it works as intended and the data is correct. Whats the deal?

Answer 1

forEach does not return anything, and so you'll iterate through each of the courses absolutely fine, but you're not providing anything to render as a result of doing this.

Switching your forEach to something like map, which returns an array of elements based on whatever you return from your function will provide - in this case - an array of elements to render.

You're also missing a return from your Course component, so make sure to add that in too.

For example:

const Course = props => {
  return props.courses.map(course =>
    <Header name={course.name}/>
  );
}

There are a few other things to bear in mind when working with arrays of components in React, so take a look at Lists and Keys in the React docs if you want more info.

Answer 2

you should use map instead of forEach