React Map Array of Object with Nested Object
Problem Description:
In react I would like to display id and name of category. How to achieve this assuming the object below is somehow hard for me to understand.
[
{
"id": 1,
"category": {
"id": 1,
"name": "CALZATURA",
}
},
{
"id": 2,
"category": {
"id": 2,
"name": "PELLETTERIA",
}
}
]
dataItems.map((item, index) => {
return (
<div>
<h1>{item.title}</h1>
{category.map((c, i) => (
<div>
<p>{c.name}</p>
</div>
))}
</div>
);
});
Solution – 1
Assuming your array is stored in a variable named const categories = [...];
.
return (
<div>
{categories.map((category) => (
<div>
<span>{category.id}</span>
<span>{category.category.name}</span>
</div>
)}
</div>
)