Search code examples
reactjsapidictionarygetaxios

Stuck with: 'Uncaught TypeError: this.state.users.map is not a function' in react (Axios)

I want to make a get request to this dummy endpoint: https://reqres.in/api/users/2

but I constantly get the error message:

TypeError: this.state.users.map is not a function

This is my code:

state = {
 users: []
}

componentDidMount() {
    axios.get(`https://reqres.in/api/users/2`)
        .then(res => {

            this.setState({ users : res.data });
        })
}

Any help on what I do wrong?

Solution

  • It appears the endpoint is returning an object not an array.

    If you wish to use an array you could do this:

    this.setState({ users: [res.data] })

    But in a nutshell I personally would change this name of state to a singular term. Then use it as an object (as it from the endpoint).

    E.g

    this.setState({ person: res.data })

    Then consume properties as desired:

    this.state.person.id

    Hope this helps 👍🏻