Why am I getting error "TypeError: this.state.users.map is not a function"

Question

I am getting an error that says "TypeError: this.state.users.map is not a function" however there is a list variable in my state which is binded so I am not sure why the map function is not working.

      getList(){
        console.log("FUNCTION CALLED");
        axios.get("/api/mentorRequests")
        .then((result) => {
          console.log("Logging results", result);
          this.setState({users: result});
        })
      }
      render() {
        console.log("USERS", this.state.users);
        return (
          <div className="">
               {this.state.users.map((user) => 
                <div>
                  {user.displayName}
                </div>
              )}
          </div>
        );
      }

Please provide more information. map() is an array method, so the possible issue is your users state is not an array. try to initialize users state with an empty array and check the result you get from getList() is an array. — Osusara Kammalawatta
– Osusara Kammalawatta, Commented Nov 14, 2020 at 2:21

Dharman · Accepted Answer · 2020-11-14 02:14:02Z

2

You should check and see if the response you are getting is an array because .map is array function you cant use it on something else so it'll give you TypeError because type of the object you are trying to use .map is not right.

edited Nov 14, 2020 at 2:14

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Nov 14, 2020 at 2:08

Muhammad Hamza

618 bronze badges

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

Comments

michael · Accepted Answer · 2020-11-14 02:09:55Z

2

You might forget to initialize state.users with an empty array.

this.state = {
  users: []
}

answered Nov 14, 2020 at 2:09

michael

4,1733 gold badges15 silver badges31 bronze badges

Comments

Samiul Lesum · Accepted Answer · 2020-11-14 02:26:53Z

1

Try to do the following:

getList() {
   console.log("FUNCTION CALLED");
   axios.get("/api/mentorRequests")
   .then((result) => {
      console.log("Logging results", result);
      this.setState({users: result});
   })
}
render() {
   console.log("USERS", this.state.users);
   return (
     <div className="">
        {this.state.users && this.state.users.map((user) => 
            <div>
               {user.displayName}
            </div>
        )}
     </div>
   );
}

answered Nov 14, 2020 at 2:26

Samiul Lesum

2681 gold badge4 silver badges11 bronze badges

Comments

chibiw3n · Accepted Answer · 2020-11-14 02:36:50Z

0

My function getList() was returning a json object and I was setting the array in my state to the json object so there was a type mismatch. Thanks to everyone who helped.

answered Nov 14, 2020 at 2:36

chibiw3n

3575 silver badges19 bronze badges

Collectives™ on Stack Overflow

Why am I getting error "TypeError: this.state.users.map is not a function"

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related