CODEWITHSUNDEEP
javascriptreactjs
Ivcota
Ivcota

Reputation: 37

Why won't my array use the map method even though it's actually an array?

So I console.log the state of users after I set it as an array of objects from the github api and it displays as an array. However, I can't use the map function like this (if I decided to use it in a child component using props):

this.state.users.map((user)=>(
 <UserItem key={user.id} user={user}/>
))

I get an error: "TypeError: this.state.users.map is not a function" And It's pretty confusing because it is an array. It looks like this in the props viewer: Array Users As you can see. Users is an array. I don't understand but I could be missing something very simple from lack of coffee. Thanks for your help! I appreciate it.

import React, { Component } from 'react';
import Navbar from './components/layout/Navbar';
// import UserItem from './components/users/UserItem';
import Users from './components/users/Users';
// import './App.css';
import axios from 'axios';

class App extends Component {

  state = {
    users: {},
    loading: false
  }

  async componentDidMount() {
    this.setState(
      {loading: true}
    )
    const res = await axios.get('https://api.github.com/users')

    this.setState(
      { 
        loading: false,
        users: res.data,
      }
    
    )

    // console.log(res.data)
  }

  render() {


    return (
      <React.Fragment>
        <Navbar />
        <div className="container">
          <Users loading={this.state.loading} users={this.state.users} />
        </div>
      </React.Fragment>
    );
  }

}

export default App;

Upvotes: 1

Views: 67

Answers (1)

subashMahapatra
subashMahapatra

Reputation: 6837

The initial value of this.state.users is an object. Hence the error map is not a function

state = {
    users: {}, <--- object
    loading: false
}

The API call happens after the component has mounted for the first time in the componentDidMount life cycle method and the value of state.users gets populated with the data.

The component has to render with the initial state on the first render.

Change the value of users to be an empty array in the initial state.

state = {
    users: [],  // change initial value of users to be an empty array
    loading: false
}

Upvotes: 5

Related Questions