I have this JSON returned from the server:
[
{
"symbol":"one option"
},
{
"symbol":"second option"
}
.......
]
I tried to display the data into dropdown using:
<Select value={props.selectedData}>
{props.availableData.map((option) => (
<option value={option.symbol}>{option.symbol}</option>
))}
</Select>
But the list if empty. What is the proper way to display the data?
You have to just put the ternary operator condition you have both ways
1.
{
props.availableData ?
<Select
value={props.selectedData}>
{props.availableData.map((option) => (
<option value={option.symbol}>{option.symbol}</option>
))}
</Select>:null
}
{
props.availableData.length === 0 ?
<Select
value={props.selectedData}>
{props.availableData.map((option) => (
<option value={option.symbol}>{option.symbol}</option>
))}
</Select>:null
}