mi archivo json como la siguiente estructura:
export interface IProject { name: string; id: string; environments: [ { name: string; assembled: string; snapshotversion: string; } ]; }La siguiente función muestra una lista de los datos json:
const Project = ({ project }: Props) => { return ( <Flex flexDirection="column"> <ul> <li>Project Id: {project.id}</li> <li> Environments:{' '} {project.environments.map((data, index) => { <Box key={index}> <li>Name: {data.name}</li> <li>Assembled: {data.assembled}</li> <li>Snapshot Version: {data.snapshotversion}</li> </Box>; })} </li> </ul> </Flex> ); };Puedo devolver los datos json correctos, pero no puedo representar las propiedades anidadas en "entornos"
No ha devuelto el JSX en el array.map. Para arreglar esto, simplemente reemplace el { con ( . Vea la línea que contiene: project.environments.map
const Project = ({ project }: Props) => { return ( <Flex flexDirection="column"> <ul> <li>Project Id: {project.id}</li> <li>Lifecyle Id: {project.lifecycleName}</li> <li> Environments:{' '} {project.environments.map((data, index) => ( <Box key={index}> <li>Name: {data.name}</li> <li>Assembled: {data.assembled}</li> <li>Snapshot Version: {data.snapshotversion}</li> </Box>; ))} </li> </ul> </Flex> ); };La sintaxis correcta es:
{project.environments.map((data, index) => ( <div>some jsx</div>))}o
{project.environments.map((data, index) => { return (<div>some jsx</div>) })}