{
"pagesections": [
{
"title": "Executive Board",
"sections": [
{
"title": "Co-Founders/Co-Presidents",
"team": [
{
"name": "Emily ZhouWang",
"designation": "Co-Founder",
"image": "../images/sample_image.jpg",
"clg": "Junior at UC Berkeley",
"linkedin": "",
"description": ""
},
{
"name": "Kathleen Kong",
"designation": "Co-Founder",
"image": "../images/sample_image.jpg",
"clg": "Junior at UC Berkeley",
"linkedin": "",
"description": ""
}
]
},
{
"title": "Directors",
"team": [
{
"name": "Emily ZhouWang",
"designation": "Co-Founder",
"image": "../images/sample_image.jpg",
"clg": "Junior at UC Berkeley",
"linkedin": "",
"description": ""
},
{
"name": "Kathleen Kong",
"designation": "Co-Founder",
"image": "../images/sample_image.jpg",
"clg": "Junior at UC Berkeley",
"linkedin": "","
}
]
},
{
"title": "Co-Founders/Co-Presidents",
"team": [
{
"name": "Emily ZhouWang",
"designation": "Co-Founder",
"image": "../images/sample_image.jpg",
"clg": "Junior at UC Berkeley",
"linkedin": "",
"description": ""
},
{
"name": "Kathleen Kong",
"designation": "Co-Founder",
"image": "../images/sample_image.jpg",
"clg": "Junior at UC Berkeley",
"linkedin": "",
"description": ""
}
]
}
]
},
{
"title": "Tech Team"
},
{
"title": "Ambassadors"
}
],
}
This is how my JSON file looks like. I'm trying to import and use it in following React component. There are three returns. One corresponds to pagesections, another to sections and last one to team. But there seems to be an error. I've tried using this.sections.map() and this.team.map() but it doesn't seem to work either. 'team' and 'sections' are not recognized in that case but here they are recognized but the map function does not seem to work.
{data.pagesections.map((e)=>{ //error is pointed at this line and
return (
<Grid container direction="column" className={classes.root}>
<Grid item className={classes.head1} key={e}> *//this line
<Team_Section title={e.title}/>
</Grid>
{e.sections.map((t)=> {
return (
<>
<Grid item key={t}>
<Section_Head title={t.title}/>
</Grid>
<Grid item container>
<Grid item xs={1} sm={1} md={2}/>
<Grid container spacing={4} justify="center" item xs={10} sm={10} md={8} align="center">
{t.team.map((g)=>{
return (
<Grid item xs={6} key={g}>
<MediaCard
name={g.name}
designation={g.designation}
image={g.image}
clg={g.clg}
linkedin={g.linkedin}
description={g.description}/>
</Grid>
);
})}
</Grid>
<Grid item xs={1} sm={1} md={2}/>
</Grid>
</>
);
})}
</Grid>
);
})}
Error: TypeError: Cannot read property 'map' of undefined
you could use optional chaining so that you only map through objects that contain arrays and ignore the ones that don't
import data from "./data.json";
export default function App() {
return (
<div className="App">
{data.pagesections.map((r) => (
<>
<div>{r.title}</div>
{r.sections?.map((i) => {
return (
<>
{i.team?.map((s) => {
return <div>{s.name}</div>;
})}
</>
);
})}
</>
))}
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
attached is a code sandbox: https://codesandbox.io/s/dreamy-mclean-wp3cb?file=/src/App.js:0-536