tengo estos datos:
[ { "id": "1", "name": "test1", "secondary": [ "testS1", "testS2" ] }, { "id": "2", "name": "test2", "secondary": [ "testS3", "testS4" ] } ] Mapeo todos los ejercicios de un archivo json, y ahora deseo hacer un bucle de props.exercices.secondary de cada objeto. Aquí está mi intento:
export default function AllExos(props) { return <div> {props.exercices.map(exo => { return <div key={exo.name}> <div> <h2>{exo.id}</h2> <p>Display secondary : {exo.secondary.map(k => { return <span key={k}>{k}</span> })} </p> </div> </div> })} </div> } No entiendo por qué aparece el error TypeError: Cannot read properties of undefined (reading 'map') . Estoy haciendo un bucle en los 'props.exercices', ¿verdad?
Prueba esta condición props.exercices && props.exercices.length > 0 &&
export default function AllExos(props) { return <div> {props.exercices && props.exercices.length > 0 && props.exercices.map(exo => { return <div key={exo.name}> <div> <h2>{exo.id}</h2> <p>Display secondary : {exo.secondary.map(k => { return <span key={k}>{k}</span> })} </p> </div> </div> })} </div> }Puede utilizar el encadenamiento opcional.
props?.exercices?.map(...)