my json file as the following structure:
export interface IProject {
name: string;
id: string;
environments: [
{
name: string;
assembled: string;
snapshotversion: string;
}
];
}
The function below renders a list of the json data:
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>
);
};
I am able to return the correct json data, but cannot render the nested properties in "environments"
You have not returned the JSX in the array.map.
To fix this just replace the { with (.
See the line containing: 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>
);
};
The correct syntax is:
{project.environments.map((data, index) => ( <div>some jsx</div>))}
or
{project.environments.map((data, index) => {
return (<div>some jsx</div>)
})}