How to populate select dropdown elements with data from API - ReactJS

Question

I'm fairly new to React. I'm fetching data from an API, and I can see the data when I check console log. However I can't figure out how I can use map() to create a new array which the option elements can then use to display the currency codes.

Currently it populates the dropdown, but the option elements are all empty and results show up as NaN.

Below is a sample of my code where I am fetching the data.

state = {
    currencies: [],
    base: "USD", //default value
    amount: "",
    convertTo: "EUR",
    result: ""
  };

componentDidMount() {
    fetch("https://api.exchangeratesapi.io/latest")
      .then(response => {
        return response.json();
      })
      .then(data => {
        let currenciesFromApi = Object.keys(data.rates);
        console.log(currenciesFromApi);
        this.setState({
          currencies: currenciesFromApi
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

Expected Results: Dropdown to be populated with currency codes from API (eg GBP, EUR, USD) and value to display rates and not NaN.

Actual Results: Dropdowns are empty and selecting any of these also return Nan.

Tameem Safi · Accepted Answer · 2019-05-18 19:54:07Z

8

I checked the source code and it seem the array of currencies contains just string values. So when you map through them to render the options, just use the variable directly as a string.

{this.state.currencies.map(currency => (
  <option key={currency} value={currency}>
    {currency}
  </option>
))}

See: https://codesandbox.io/s/hu8cb

answered May 18, 2019 at 19:54

Tameem Safi

7285 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ImranR Over a year ago

I see, silly mistake but good to know next time. Is there anything I could have done better where I have fetched the data?

Tameem Safi Over a year ago

You can maybe separate the fetch call into a function inside another file so it can be reused. Also maybe you can look into react hooks instead of using the class component. See: robinwieruch.de/react-hooks-fetch-data

Collectives™ on Stack Overflow

How to populate select dropdown elements with data from API - ReactJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related