Using React, how to grab data from JSON in API - object of arrays

Question

I'm currently using this API https://covid19.mathdro.id/api/countries to practice grabbing data. I'm trying to select, have an option drop down where I can select a country (and also grab country code (iso3) for value/key) and then display stats (eg confirmed, recovered, etc.).

Using console.log, I get back:

{countries: Array(188)}
 countries: (188) [{…}, {…}, …]
 __proto__: Object

Where countries seem to be an object with nested arrays and objects inside:

{countries: Array(188)}
 countries: Array(188)
  [0 … 99]
  [100 … 187]

I'm currently trying to grab countries then map both arrays: [0 ... 99] and [100 ... 187] , so that at the end I can dynamically render a drop down option list ( <select> + <option> ) of country names using data eg: {name: "Afghanistan", iso2: "AF", iso3: "AFG"} and select a country and see stats of selected country.

In React render:

  return (
    <div>
      <select>
        {grabbingData.map(([country, code]) => (
          <option key={code} value={countries.iso3[code]}>
            {country}
          </option>
        ))}
      </select>
    </div>
  );

With console.log(countries.countries[187]) , I'm able to grab {name: "Zimbabwe", iso2: "ZW", iso3: "ZWE"} , but I'm unable to render the select option drop down list with country names.

Answer 1

You are destructing the country as array instead of an object inside your map .

Also, I don't understand the value for your each option . I supposed you want to set each value to be an object ? If yes, you wouldn't want to do that.

I suggest you do it this way.

...

function onChange(event) {
  const { value } = event.target;
  const selectedCountry = countries.find(({ iso2 }) => iso2 === value);

  console.log(selectedCountry);
}

return (
  <div>
    <select onChange={onChange}>
      {countries.map((country, i) => (
        <option key={i} value={country.iso2}>
          {country.name}
        </option>
      ))}
    </select>
  </div>
);

---

If you want to get the stat for the selected country, you have to include what API to use on you question. Currently the API you mentioned only returns countries .