React TypeError: map() is not a function error [Solved]

When developing a React application, you might have come across an error stating “TypeError: map() is not a function“. This error usually occurs when you are attempting to use the map() method on a non-iterable object that is not an array or an instance of an Array.

To understand this error, it is important to understand how map() works.

What is map() in Javascript?

The map() method is an in-built javascript function that creates a new array with the result of a provided call function on every element of a given array.

In short, we can say, it transforms an array of values into a new array of values.

Here is a simple example of using a map() method on an array.

const arr = [1, 2, 3, 4, 5];
const doubleNumbers = arr.map(el => el * 2);
console.log(doubleNumbers); // [2, 4, 6, 8, 10]

In this example, we have called the map method on arr and a new array is created doubleNumbers, with each element of arr being multiplied by 2.

Now with the understanding of map(), let’s see different ways we can fix the error in react application.

Fixing “React map is not a function” Error

The error “TypeError: map() is not a function” occurs when we call the map method on a value that is not an array or an object.

Here, is an example of how this error might occur.

export default function App() {
  const obj = { name: "Jack", country: "USA" };
  return (
    <div className="App">
      {obj.map((el) => {
        return <p>{el}</p>;
      })}
    </div>
  );
}

This will throw us the “TypeError: obj.map is not a function” error in our terminal.

Now here are some of the ways we can do to fix this error.

Using a valid Array

The most simple and easy fix is to call map() method on a valid array. Here is an example.

Example:

export default function App() {
  const arr = ['one', 'two', 'three'];
  return (
    <div className="App">
      {arr.map((el) => {
        return <p>{el}</p>;
      })}
    </div>
  );
}

Result:

one
two
three

Using Object.values() or Object.entries() method

Now if you have an object on which you want to use the map() method, then first we have to convert it to an array.

We can use Object.values() and Object.entries() to convert the object into an array before using the map() method on it.

Example:

export default function App() {
  const obj = { name: "Jack", country: "USA" };
  const dataArr = Object.values(obj);

  return (
    <div className="App">
      {dataArr.map((el) => {
        return <p>{el}</p>;
      })}
    </div>
  );
}

Result:

Jack
USA

The Object.values() returns only the values from an object in an array. If you want both key – value from the object, you can use Object.entries() method.

Using Array.isArray() method

You can avoid getting the error by checking if the value is an array or not using Array.isArray() method.

The isArray() method will check if the passed value is an array or not.

Example:

export default function App() {
  const obj = { name: "Jack", country: "USA" };

  return (
    <div className="App">
      {Array.isArray(obj)
        ? obj.map((el) => {
            return <p>{el}</p>;
          })
        : null}
    </div>
  );
}

In the above example, the Array.isArray() method checks if the passed value i.e obj is an array or not.

If it’s an array, it will run the map() method on the given array else it will return null.

Conclusion:

In order to avoid the “TypeError: obj.map is not a function” error in React, make sure that the map() method is called only on iteratble object like an array only and that the array is not empty.

Related Articles: