Map is not a function react ошибка

Check out the information in this post. You will find the detailed instruction for the TypeError: map() is not a function in React. To avoid this error, you must make sure that you use the map() method on an array value. Let’s learn more about the cause and the most suitable approach to this problem.

Why do we have this error?

First, we have to know what causes you to get the error message: “TypeError: map() is not a function“. Look at the following example, it will throw this error:

export default function App() {
 
const myChild = {name: 'Kai', age: 12};
 
  return (
    <div>
      {myChild.map(item => {
        return <h2>{item}</h2>;
      })}
    </div>
  );
};

Output:

The reason you receive this error message is that you are applying the map() method to a non-array object.

In JavaScript, the map() method creates an array by calling a specific function on each element contained in the parent array. So you cannot arbitrarily call the map() method without knowing the type of that object.

The simplest way to avoid this error is to use the map() method on an object that is an array, like the following example:

export default function App() {
 
  const friends = ['Celina','Nick','James','Tayor','Paul']
 
  return (
   
    <div>
      { friends.map(item => {
          return <h2>{item}</h2>;
        })
      }
 </div>
  );
};

However, if you don’t know whether the value is really an array or not, you can use the Array.isArray() method to check.

export default function App() {
 
  const myChild = {name: 'Kai', age: 12};
 
  return (
   
    <div>
      { Array.isArray(friends)
        ? friends.map(item => {
          return <h2>{item}</h2>;
        })
        : console.log('Object is not an array')
      }
    </div>
  );
}; 

In this example, the ternary operator is used for conditional rendering. In case the value is an array, the map() method will be called. Otherwise, you will get a message: “Object is not an array“.

In another case, you have an array-like object that you try to convert to an array before calling the map method using the Array.from() method.

export default function App(){
  const friends = new Set(['Timmy', 'Carl', 'Jenny']);
 
  return (
    <div>
      {Array.from(friends).map(element => {
        return (
          <div key={item}>
            <h2>{item}</h2>
          </div>
        );
      })}
    </div>
  );
  };

We convert the value to an array before calling the map method. You can apply this approach to NodeList, which is returned when you call the getElementsByClassName method.

In case you work with an object, you will not be able to use the map() method to iterate through all the elements in the array because map() is only usable with array values.

At this point, you can use method Object.keys() to get the array of keys or method Object.values() to get the array of values ​​of that object.

export default function App() {
 
  const myChild = {
    name: 'Kai',
    age: 12,
  };
 
  return (
    <div>
      {/*iterate over an object's array of keys*/}
      {Object.keys(myChild).map((key) => {
        return (
          <div key={key}>
            <h2>
              {key}
            </h2>
          </div>
        );
      })}
 
      <br />
 
      {/*iterate over an object's array of values*/}
      {Object.values(myChild).map((value, idx) => {
        return (
          <div key={idx}>
            <h2>{value}</h2>
          </div>
        );
      })}
    </div>
  );
}

Summary

In conclusion, we have explained to you what causes the TypeError: map() is not a function in React. To avoid the error, you must call the map() method on an array object. Hopefully, the information in this article will help you.

Maybe you are interested:

• Property does not exist on type ‘never’ in React
• Module not found: Can’t resolve ‘babel-loader’

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:

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:

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.