React map through json object

I am having trouble finding a way to iterate through this nested JSON data. I would like to display elements into select option list.

I store my data in a state after a request.

const [filterData, setFilterData] = useState([]);

useEffect(() => {
    ScenarioService.getFilterData().then((res) => {
  }, []);

I already tried:

      {Object.keys(filterData).map((key) => {
         return filterData[key].map((value) => {
           return <option>{key[value]}</option>;
{Object.keys(filterData["regions"]).map((keyName, i) => {
   return (
     <option key={filterData[keyName]}>{filterData[keyName]}</option>
          return <option>{value}</option>

Last one gives my TypeError: Cannot read property ‘map’ of undefined.

If i try to set my state to setFilterData( then i can call map() and it works, but then my state is only regions.

Result should look like: result


You could simplify the code duplication by using a function

const renderOpts = key => filterData[key].map(v => <option value={v}>{v}</option>)

Then to render the selects:



Source: stackoverflow