react – how to add multiple lists in options with condition to show one of the lists based on the state?

I want to load multiple lists in options. I want to show list based on the country selected. I can’t seem to figure out either.

First I tried to load all the lists and put them in <option>

# lists 
<datalist id="stockSelection">
{React.Children.toArray(
                EXDATA.map(({ symbol }) => <option value={symbol} />)
              )}
{React.Children.toArray(
                GYDATA.map(({ symbol }) => <option value={symbol} />)
              )}
</datalist>

This didn’t work. While I see that the list laods, when I try to type anything from GYDATA it doesn’t show me the options.

Conditional

{if this.state.country === “United States of America” {React.Children.toArray( EXDATA.map(({ symbol }) => ) )}} else {React.Children.toArray( GYDATA.map(({ symbol }) => ) )}

As expected both are not working, I am trying to figure this out for 2 hours and not making much headway.

Answer

<datalist id="stockSelection">
    {this.state.country === "United States of America"
        ? EXDATA.map(({ symbol }) => <option value={symbol} />
        : GYDATA.map(({ symbol }) => <option value={symbol} />}
</datalist>