TypeError: Cannot read property 'map' of undefined. What should I fix?

Question

I got the error when I tried to get some datas from api.

Then I searched how to solve this error but I couldn't solve. I want to solove this error. I don't know Why do I get this error. What should I fix my code ?? Please tell me any ideas. thank you for reading !

this is my error.

TypeError: Cannot read property 'map' of undefined

and message image.

this is my code.

import React,{ Component } from 'react';

class Exchange extends Component {
  constructor(props){
    super(props);
    this.state = {
      isLoaded: false,
      items: [],
    }
  }
  componentDidMount(){
    fetch('https://api.exchangeratesapi.io/latest')
    .then(res => res.json())
    .then(json => {
      this.setState({
        isLoaded: true,
        items: json.items,
      })
    })
    }

    render(){
      var { items,isLoaded } = this.state;

      if(!isLoaded){
        return <div>...Loading</div>;
      }else{
        return (
          <div>
            <ul>
              {items.map(item =>(
                <li key={item.rates}>{item.CAD}</li>
              ))}
            </ul>
          </div>
        )
      }
    }
}

 export default Exchange;

and this is using api.

`items` is not an array. `map is applicable on array. You need to convert the data into array of objects. Check this: https://reactjs.org/docs/lists-and-keys.html — sidverma, Jun 23 '20 at 07:49
in this case you can check your state with [React Dev Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi). likely @sidverma said, `items` is not array. — gnujoow, Jun 23 '20 at 07:52
can you console `json.items`? i think this part made problem. — gnujoow, Jun 23 '20 at 07:53

score 1 · Accepted Answer · answered Jun 23 '20 at 08:00

1

I think the way you access the data from api is wrong it should be

this.setState({
    isLoaded: true,
    items: json.rates //json.rates not json.items
});

and when rendering it, map expecting a array so you have do something like this

<ul>
    {Object.keys(items).map(key => (
        <li key={key}>{key} - {items[key]}</li>
     ))}
</ul>

Demo

answered Jun 23 '20 at 08:00

Kalhan.Toress

21,683
8
68
92

1

fantastic ! My app worked well !. thank you ! I could learn how I shoud do get json data. – takuma bo Jun 23 '20 at 08:24

Smile · Answer 2 · 2020-06-23T07:57:11.863

0

There is no attribute items in the json response. That's why items is undefined after following statement : items: json.items.

Also, map() is only applicable to array. Response from the API you are calling is not Array.

You can modify code something like

this.setState({
    isLoaded: true,
    items: json,
})

And

<ul>              
    <li>{items.rates.CAD}</li>
</ul>

edited Jun 23 '20 at 07:57

answered Jun 23 '20 at 07:51

Smile

3,832
3
25
39

good ! I could get json data and write on browser ! thank you – takuma bo Jun 23 '20 at 08:27

balaji b r k · Answer 3 · 2020-06-23T08:09:47.837

0

To change the state of the array this.setState({ items: [...this.state.items, itemsArr] }) If the your response of API is array you can follow the above way.

But in your API response it seems like object, to push object into an array gothrough the link

edited Jun 23 '20 at 08:09

answered Jun 23 '20 at 07:55

balaji b r k

65
2
6

Thank you for replying ! I actually miss converting object to array... I could learn well. thank you for helping! – takuma bo Jun 23 '20 at 08:30

TypeError: Cannot read property 'map' of undefined. What should I fix?

3 Answers3