How can I loop through a nested loop and show data - reactjs

Question

Hey I am trying to show data from this api data
{
"status": "success",
"data": [
{
"id": 1,
"created_at": "2022-12-20T15:20:42.000000Z",
"updated_at": "2022-12-20T15:20:42.000000Z",
"lp_campaign_id": "61c158df57694",
"lp_campaign_key": "MQkGFrhcbtx4BDzq87TP",
"lp_supplier_id": "asdasd",
"first_name": "Test",
"last_name": "test",
"phone": "[phone]",
"email": "test#gmail.com",
"zip_code": "2356"
},
{
"id": 2,
"created_at": "2022-12-20T15:20:57.000000Z",
"updated_at": "2022-12-20T15:20:57.000000Z",
"lp_campaign_id": "61c158df57694",
"lp_campaign_key": "MQkGFrhcbtx4BDzq87TP",
"lp_supplier_id": "asdasd",
"first_name": "Test",
"last_name": "test",
"phone": "[phone]",
"email": "test#gmail.com",
"zip_code": "2356"
},
{
"id": 3,
"created_at": "2022-12-20T15:22:18.000000Z",
"updated_at": "2022-12-20T15:22:18.000000Z",
"lp_campaign_id": "61c158df57694",
"lp_campaign_key": "MQkGFrhcbtx4BDzq87TP",
"lp_supplier_id": "asdasd",
"first_name": "Test",
"last_name": "test",
"phone": "[phone]",
"email": "test#gmail.com",
"zip_code": "2356"
}
]
}
It has nested loop I guess. So how can I show data using react js. I tried using react js but failed to show data using my code I shown below.
Here what I tried
let [leads, setLeads] = useState([])
const url = "http://127.0.0.1:8000/api/data"
useEffect(() => {
fetch(url).then(response => {
console.log(response)
})
.then(result => {
setLeads(result)
})
.catch(e => {
console.log(e)
})
})
{
leads ?
leads.map(
(lead) => {
return (
<tr className="hover:bg-gray-100 p-3">
<td>{lead.data.created_at}</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
)
}
):
<>Data Not Found</>
}
I am not familiar with react js at all. Som I have no idea about it. What is the easy way to show the data?

Answer 1

You can try this code, so you can get the response and use the array in data property in the response.
let [leads, setLeads] = useState([]);
const url = "http://127.0.0.1:8000/api/data";
useEffect(() => {
fetch(url)
.then((response) =>
(response.json())
)
.then((result) => {
setLeads(result.data);
})
.catch((e) => {
console.log(e);
});
},[]);
return leads ? (
leads.map((lead, index) => (
<tr className="hover:bg-gray-100 p-3" key={lead.id}>
<td>{lead.created_at}</td>
<td>{lead.updated_at}</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
))
) : (
<>Data Not Found</>
);