React JS, display Data from Nested json - reactjs

Question

I'm having trouble displaying data from this nested json
I can't display all items in the items box
I've tried some solution but still not work,
since my json format is kinda different.
Json data
{
"data": [
{
"pattern": "Right",
"Color": "blue",
"Weight": "50",
"items": {
"chair": {
"location": "c1-2a",
"quantity": "10",
"available": true
},
"table": {
"location": "c1-2c",
"quantity": "5",
"available": false
}
}
},
{
"pattern": "Left",
"Color": "green",
"Weight": "12",
"items": {
"mouse": {
"location": "c2-2a",
"quantity": "29",
"available": true
},
"headphones": {
"location": "c1-2e",
"quantity": "50",
"available": false
},
"monitor": {
"location": "c1-2e",
"quantity": "2",
"available": false
}
}
}
]
}
React Code
class UsersTable extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
data: []
}
}
componentDidMount() {
fetch("/test")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
data: result.data
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const {error, isLoaded, data} = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<table id="example" className="table table-striped table-bordered">
<thead>
<tr>
<th>Pattern</th>
<th>Color</th>
<th>item</th>
<th>location</th>
</tr>
</thead>
<tbody>
{data.map(item =>
(
<React.Fragment>
<tr>
<td>{item.pattern}</td>
<td>{item.color}</td>
<td>{item.items}</td> <======= I cant loop all items
<td>{item.location}</td>
</tr>
</React.Fragment>
))}
</tbody>
</table>
);
}
}
}
Expected result
----------------------------------------------------------
|Patern|Color | Item |Location |
----------------------------------------------------------
|Right |blue |chair,table |c1-2a,c1-2c |
|left |green |mouse,headphones,monitor|c2-2a,c1-2e,c1-2e|
Error result
Error: Objects are not valid as a React child (found: object with keys {chair, table}). If you meant to render a collection of children, use an array instead.
Cheers!

Answer 1

items is a object in your case, first you have extract values from items object by using items.map() or so. Because items is a object hence you are getting below error.
Error: Objects are not valid as a React child (found: object with keys {chair, table}). If you meant to render a collection of children, use an array instead.

Answer 2

Before returing from map fuction, first map over items and create string of items object.
{data.map(item => {
var items = item.items;
var itemList = "";
items.forEach(item => {
itemList = itemList + item + " ,";
})
return (
<React.Fragment>
<tr>
<td>{item.pattern}</td>
<td>{item.color}</td>
<td>{itemList}</td>
<td>{item.location}</td>
</tr>
</React.Fragment>
)))}

Answer 3

You trying to loop over an object, use [key, value] of Object.entries
<td>{for let [key, value] of Object.entries(item.items) { .... }</td>