doubts about how to pass information to components reactjs

Question

I am passing an Array to a component and I go through it with a foreach, it passes me the objects correctly, but in the component it shows me as undefined, in console the foreach works correctly, when passing to the component it gives me the error of undefined the props

import React from 'react' import ReactDOM from 'react-dom' const Header =(props)=>{ return(
<h1>{props.course.name}</h1>
) } const Content =(props)=>{ //probar pasar el course para sacar del objeot el arreglo return(

<div>
  {props.parts.map((value)=>
  <Part key={value.id} part={value.name} exercises={value.exercises}/>)}
</div>
) } const Total =(props)=>{//no se debe usar indice de arreglo para key por cmbios en arrglo // const total =0 //props.parts.forEach(element => {total +=element.exercises // console.log(parts) console.log(props.parts,'prosp') const total= props.parts.reduce((totalA,valorAC)=>
{ /* console.log(totalA.exercises,'totalA valora q se imprime como q es total a') console.log(valorAC.exercises,'valorAC valora q se imprime como q es ACumulador') console.log(totalA.exercises+valorAC.exercises, 'Suma Probadni') */ return { exercises:
totalA.exercises + valorAC.exercises} }) const total2 = props.parts.reduce((totalA,valorAC)=> totalA+valorAC.exercises,0) /* console.log(total2,'total 2 para ver si suma') console.log(total.exercises) */ //}); return(
<h4>
  Total of exercises {total.exercises}
</h4>
) } const Part = (props)=>{ return(
<p>
  {props.part} {props.exercises}
</p>
) } const Course=(props)=>{ return (
<div>
  {console.log(props.course ,'header de curso q se pasa')}


  <Header course={props.course}/> {console.log(props.course.parts,'partes de curso q se pasa')}
  <Content parts={props.course[1].parts} index={props.course.index}/>

  <Total parts={props.course[1].parts}/>

</div>
) } const App = () => { // const course = 'Half Stack application development' const course ={ id:1, name :'Half Stack application development', parts:[ { id:1, name:'Fundamentals of React', exercises: 10 }, { id:2, name:'Using props to pass data', exercises:7
}, { id:3, name:'State of a component', exercises:14 } ] } const courses = [ { name: 'Half Stack application development', id: 1, parts: [ { name: 'Fundamentals of React', exercises: 10, id: 1 }, { name: 'Using props to pass data', exercises: 7, id: 2
}, { name: 'State of a component', exercises: 14, id: 3 }, { name: 'Redux', exercises: 11, id: 4 } ] }, { name: 'Node.js', id: 2, parts: [ { name: 'Routing', exercises: 3, id: 1 }, { name: 'Middlewares', exercises: 7, id: 2 } ] } ] //retorno de curso
con arreglos return (
<Course course={courses.forEach(coursef=>{ console.log(coursef, 'curso que retorna')// return coursef })} /> ) /* return (
  <Course course={course}/> ) */ } ReactDOM.render(

  <App />, document.getElementById('root'))

Answer 1

{courses.map(course => <Course course={course} />)}

use this i.e map over the courses array and call the <Course /> component in the map