react js : display items using map method - reactjs

Question

i want to display submodule names also inside div
this is my api data
"predefined": [
{
"id": 2,
"mainModule": "bonding",
"description": "some random description 2",
"sub_module": [
{
"id": 3,
"subModuleName": "activity of bonding",
"completed": false
},
{
"id": 4,
"subModuleName": "self care",
"completed": false
}
]
},
{
"id": 1,
"mainModule": "main module 1",
"description": "some random description",
"sub_module": [
{
"id": 1,
"subModuleName": "sub module 1",
"completed": false
},
{
"id": 2,
"subModuleName": "sub module 2",
"completed": false
}
]
}
],
this is my axios to fetch the data from api and set my state called items
axios
.get(
"url",
config
)
.then((res) => {
this.setState({ items: res.data.predefined });
});
}
this is the jsx i have used to display my api here personData.mainmodule and personData.description works fine since submoule names are inside an arrray not rendering i cannot use it as {personData.sub_module[0].subModuleName}
{this.state.items.map((personData) => {
return (
<>
<div className="activity">
<h3>{personData.mainModule}</h3>
<span>{personData.description}</span>
{this.state.item.map((personData) => {
return (
<>
{personData.sub_module.subModuleName} //error
</>
);
})}
</div>
</>
);
})}

Answer 1

You should use current personData variable to access sub_module properties. And then you use another Array.map to render it.
{
personData.sub_module.map(item => {
return (
<>
{item.subModuleName}
</>
);
})
}

Answer 2

{
personData.sub_module.map(item => {
return (
<>
{item.subModuleName}
</>
);
})
}

Answer 3

You don't need to iterate this.state.items again to get sub_module. You can do like this
{this.state.items.map((personData) => {
return (
<>
<div className="activity">
<h3>{personData.mainModule}</h3>
<span>{personData.description}</span>
{personData.sub_module.map((data) => {
return <div>{data.subModuleName}</div>;
})}
</div>
</>
);
})}
This way you can iterate sub_module properly.