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?
// when i use console.log(props[0]) // it shows undefined
porque el nombre de la variable de matriz es parts
como ha mencionado aquí:
// but when i use console.log(props) // it shows the array information as // {parts: Array(3)} // parts: Array(3)
Así que prueba esto:
console.log(props.parts)
o
console.log(props.parts[0])
console.log (props) no devuelve la matriz, devuelve el objeto tiene 1 nombre de atributo partes (las partes son una matriz)
=> Solución:
const Content = props => { const { parts } = props; return ( <div> <Part parts=parts[0] /> </div> ) }