Me estoy volviendo indefinido al acceder al elemento de la matriz, pero la consola mostró valor al usar solo el nombre de la matriz. El código:

 const Part = (props) => { return <p>{props.name} {props.exercises}</p> } const Content = (props) => { // when i use console.log(props[0]) // it shows undefined // // but when i use console.log(props) // it shows the array information as // {parts: Array(3)} // parts: Array(3) // 0: {name: 'Fundamentals of React', exercises: 10} // 1: {name: 'Using props to pass data', exercises: 7} // 2: {name: 'State of a component', exercises: 14} // length: 3 // [[Prototype]]: Array(0) // [[Prototype]]: Object return ( <div> <Part parts={props[0]} /> </div> ) } const App = () => { const course = 'Half Stack application development' const parts = [ { name: 'Fundamentals of React', exercises: 10 }, { name: 'Using props to pass data', exercises: 7 }, { name: 'State of a component', exercises: 14 } ] return ( <div> <Content parts={parts} /> </div> ) }

Entonces, no entiendo por qué en Contenido, console.log(props) devuelve información de matriz, pero console.log(props[0]) dice indefinido, que no obtiene nada en App.

Actualización: Gracias por la respuesta de todos. Ahora sé que si uso 'props.parts' dentro del Contenido, obtendré el resultado correcto. Luego recibí otra pregunta (lo siento, soy nuevo en JS y React): porque las 'partes' se definen en la aplicación y se pasan al contenido. No debería usar o saber 'partes' al definir Contenido. Entonces, ¿por qué necesito usar 'props.parts' dentro del Contenido?