Render collection of nested JSON Data - reactjs

Question

I'm using a template file that takes in data from a JSON and displays it as a list
JSON -
"items":[
{
"name":"a",
},
{
"name":"b",
},
{
"name":"c",
}
]
JS File
var items= this.props.data.items.map(function(items){
return <li key={items.name}><span className={items.name}></span><em>{items.name}</em></li>
})
//where it later gets rendered like so:
<div className="four columns main-col">
<div className="bars">
<ul className="items">
{items}
</ul>
</div>
</div>
However I want to modify the data, so that its more categorized, and will have nested objects
Example:
"categorizedItems":[
{
"type":"a",
"items":[
{
"name":"apple"
},
{
"name":"banana"
}
]
},
{
"type":"b",
"items":[
{
"name":"car"
}
]
}
]
So i thought, since it is a nested JSON object, I will need to map twice, so i tried the following:
var categories= this.props.data.categorizedItems.map(function(category){
var items= category.items.map(function(item){
return <li key={items.name}><span className={items.name}></span><em>{items.name}</em></li>
})
return <ul key={category.type}>{items}</ul>
})
//and i render it the same way
<div className="four columns main-col">
<div className="categories">
{categories}
</div>
</div>
However this gives me errors saying "Error: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead."
I dont understand how what I am doing (the nested mapping) is different from the original code (single mapping).

Answer 1

I resolved the errors in your code
Try this
import React from "react";
import "./styles.css";
const data = [
{
type: "a",
items: [
{
name: "apple"
},
{
name: "banana"
}
]
},
{
type: "b",
items: [
{
name: "car"
}
]
}
];
const categories = data.map((category) => {
const items = category.items.map(function (item) {
return (
<li key={item.name}>
<span className={item.name}></span>
<em>{item.name}</em>
</li>
);
});
return <ul key={category.type}>{items}</ul>;
});
export default function App() {
return (
<div className="four columns main-col">
<div className="categories">{categories}</div>
</div>
);
}
Here is sandbox link - https://codesandbox.io/s/nervous-noether-80ye9?file=/src/App.js:0-714
the problem in existing code.
Instead of
var categories= this.props.data.categorizedItems.map(function(category){
var items= category.items.map(function(item){
return <li key={items.name}><span className={items.name}></span><em>{items.name}</em></li>
})
return <ul key={category.type}>{items}</ul>
})
Try
var categories= this.props.data.categorizedItems.map(function(category){
var items= category.items.map(function(item){
return <li key={item.name}><span className={item.name}></span><em>{item.name}</em></li>
})
return <ul key={category.type}>{items}</ul>
})