How to fetching the data except undefined in react js - reactjs

Question

I want to retrieve some data from a JSON file. But if the data is not available i am getting undefined. How to remove undefined data from my output.
Here is the sample code I have tried.
import React from 'react';
const DisplayDataAtHome = () => {
const json_data=[{
"merchant_id": 1,
"medium_egg": 104,
"small_egg": 100,
"desi_egg": 110
}, {
"merchant_id": 2,
"big_egg": 90,
"medium_egg": 104,
"desi_egg": 112
}, {
"merchant_id": 3,
"big_egg": 95,
"small_egg": 104,
"medium_egg": 107
}]
console.log(json_data);
return (
<>
<div className="outerDiv">
{
json_data.map((val, i)=>(
<>
{
typeof val.big_egg === "undefined" ? null:
<div className="innerDiv">
<p align="left">Big Egg</p>
<p align="left">weight: 500gm.</p>
<p align="left">{"₹"+val.big_egg+"/-"}<button>ADD</button></p>
</div>
}
{
typeof val.desi_egg === "undefined" ? null:
<div className="innerDiv">
<p align="left">Small Egg</p>
<p align="left">weight: 500gm.</p>
<p align="left">{"₹"+val.small_egg+"/-"}<button>ADD</button></p>
</div>
}
{
typeof val.small_egg === "undefined" ? null:
<div className="innerDiv">
<p align="left">Desi Egg</p>
<p align="left">weight: 500gm.</p>
<p align="left">{"₹"+val.desi_egg+"/-"}<button>ADD</button></p>
</div>
}
</>
))
}
</div>
</>
)
}
export default DisplayDataAtHome;
My output should looks like ion one div I want to get all the data as one more div. Just forgot about div. I want to fetch the data, the undefined data should not come.
Here I am getting data as well as some undefined data also. But I want to remove the undefined data.
Can anyone help me how to solve this problem
Thanks in advanced.

Answer 1

You use && for this, so when first condition is undefined the && operation will not go further and will render nothing else it will render the second part.
json_data.map((val, i)=>(
<>
{
val['big_egg'] &&
<div className="innerDiv">
<p align="left">Big Egg</p>
<p align="left">weight: 500gm.</p>
<p align="left">{"₹"+val.big_egg+"/-"}<button>ADD</button></p>
</div>
}
{
val['desi_egg'] &&
<div className="innerDiv">
<p align="left">Small Egg</p>
<p align="left">weight: 500gm.</p>
<p align="left">{"₹"+val.desi_egg+"/-"}<button>ADD</button></p>
</div>
}
{
val['small_egg'] &&
<div className="innerDiv">
<p align="left">Desi Egg</p>
<p align="left">weight: 500gm.</p>
<p align="left">{"₹"+val.small_egg+"/-"}<button>ADD</button></p>
</div>
}
</>
))