JSON map object to the table in React - json

Question

I have a JSON that is coming like this and I want to show this JSON in the table in React.
{
"Status": true,
"discounts": {
"individual": {
"number_of_cars_discount": {
"1": "1",
"10": "1",
"2": "0.98",
}
}
},
"main_price": {
"client_type": "individual",
"large_car": {
"100": "3",
"1000": "0.9",
"100000": "0.60",
},
}
}
So to do this, I defined
const [mainPrice, setMainPrice] = useState({});
in the parent component and I fetched it like this:
setMainPrice(res.data.main_price);
I sent the mainPrice to the child component where I want to display JSON in the table:
<tbody>
<tr>
<td>
{Object.keys(individualPosts).map((key) => (
<tr>
<td key={key}>{individualPosts[key]}</td>
</tr>
))}
</td>
<td>
{Object.keys(mainPrice.large_car).map((key) => (
<tr>
<td key={key}>{mainPrice.large_car[key]}</td>
</tr>
))}
</td>
</tr>
</tbody>
But it gives me an error: TypeError: Cannot convert undefined or null to object
But I couldnt figure out why.
I have other types of cars like large_cars, small_cars so I need to take the mainPrice like this. I don't want to define all the types of cars and send them to the child component as a props. Or should I make it like this?
Please give me advice and the solution.

Answer 1

Null check required in such cases to avoid errors.
Try this
<td>
{Object.keys(mainPrice?.large_car).length > 0 && Object.keys(mainPrice?.large_car).map((key) => (
<tr>
<td key={key}>{mainPrice.large_car[key]}</td>
</tr>
))}
</td>