React - how to render nested object with renderItem - django

Question

I'm a bit struggling with rendering nested object in my front end. I know there is a map function might be helpful, but I'm not sure how I can get it to work in my case (with renderItem). The back end I'm using are Rest API framework and Django.
This is what JSON structure looks like.
{
"id": 1,
"name": "Job 1",
"address": [
{
"id": 4,
"street": "65 Karamea Street",
"suburb": "Beautiful Surburb",
"town": "Christchurch",
"postcode": "8001",
"address_type": "h"
}
],
"franchise": {
"id": 2,
"name": "Company ABC",
"person": 2,
"legal_name": "Company ABC Ltd.",
"created": "2019-08-09T09:40:35.697582Z",
"modified": "2019-09-23T03:21:43.258983Z",
"region": {
"id": 4,
"region": "QueensTown"
}
},
"customer1": {
"id": 1,
"last_name": "Tom",
"first_name": "Wilson",
"address": [
{
"id": 11,
"street": "1 Sunset Road",
"suburb": "Auckland",
"town": "Auckland",
"postcode": "1234"
}
]
}
This is the React code:
import React from 'react';
import { List, Card } from 'antd';
const Job = props => {
return (
<React.Fragment>
<List
grid={{
gutter: 16,
xs: 1,
sm: 2,
md: 4,
lg: 4,
xl: 6,
xxl: 3,
}}
dataSource={props.data}
renderItem={item => (
<List.Item>
<Card title={<a href={`/job/${item.id}`}>{item.customer1.first_name}</a>}>{item.franchise.legan_name}
<span> | Based on </span>
{item.name}
</Card>
</List.Item>
)}
/>
</React.Fragment>
);
};
export default Job;
Within the card object, I wish to render the first_name of customer1 and the legal_name of franchise. Apparently item.customer1.first_name and item.franchise.legal_name aren't working.
I'm NEW to React, any help would be much appreciated! It would be great if you could provide some actual code just to be specific.
Many thanks in advance.

Answer 1

You are not sending array of jobs but an object to List.
Changes done:-
1) Converted the passed object into array.
2) Corrected name of attribute item.franchise.legal_name
Below is the working code:-
import React from "react";
import ReactDOM from "react-dom";
import { List, Card } from "antd";
class App extends React.Component {
render() {
return (
<React.Fragment>
<List
grid={{
gutter: 16,
xs: 1,
sm: 2,
md: 4,
lg: 4,
xl: 6,
xxl: 3
}}
dataSource={new Array(this.props.data)}
renderItem={item => (
<List.Item>
<Card
title={
<a href={`/job/${item.id}`}>{item.customer1.first_name}</a>
}
>
{item.franchise.legal_name}
<span> | Based on </span>
{item.name}
</Card>
</List.Item>
)}
/>
</React.Fragment>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

In order to show your JSON data you should use map in your render()
This is how map works
render(){return(
< div>{this.state.mydata.map(m=><div>{m. name < /div> })
< /div>
);
Now in order to use your nested data
In the map you can map m again (like m.map(...) )
Hope you get the idea and works for you