React | TypeError: this.state.cars.map is not a function

Question

I'm trying to show a list of car brands in react but i get this error. The Web API is tested and works fine.

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

import React from "react";
import axios from "axios";

export default class cars extends React.Component {
  state = {
    cars: []
  };

  async componentDidMount() {
    axios.get("http://localhost:3000/api/fetchcars").then(res =>{
        console.log(res);
        this.setState({cars: res.data});
    });
  }

  render() {
      return(
          <ul>
              {this.state.cars.map(car => <li>{car.brand}</li>)}
          </ul>
      )
  }
}

Response Output

config: Object { url: "http://localhost:3000/api/fetchcars", method: "get", timeout: 0, … }
data: {…}
car: Array(3) [ {…}, {…}, {…} ]
status: true
<prototype>: Object { … }
headers: Object { "content-type": "application/json; charset=utf-8" }
request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }
status: 200
statusText: "OK"
<prototype>: Object { … }

Answer 1

This error will generally crop up because you're trying to map something that is not of the type array. Make sure you're actually mapping an array. If it is an array this crops up usually because the value you're expecting to map across is undefined or null. If that is the case, that is your problem, and you must check that the value exists before mapping it.

In this case you're targeting res.data which is an object, instead of the array which is res.car.