Typeerror data map is not a function

Typeerror data map is not a function

by

How to fix “typeerror: data.map is not a function“ error message in JavaScript?

Are you having a hard time trying to figure out this error? Don’t worry! We got you.

In this article, we’ll show you how to fix the “typeerror data.map is not a function reactjs” error.

What is data.map?

A data.map refers to the map() method called on a variable named data.

The map method is a built-in function for arrays in JavaScript.

That creates a new array with the results of calling a provided function on every element in the calling array.

What is “typeerror: data.map is not a function”?

The “typeerror: data.map is not a function” is an error message that occurs when you are trying to use the map() method on a variable that is not an array.

The map() method is a method for Array prototypes, not for Objects.

So, in simple words, if you are trying to use a map on an object, you will get this error message.

For example:

const data = {
    name: 'Caren',
    age: 18,
    city: 'Canada'
};

data.map(item => console.log(item));

If we run this code, it will result in an error message:

TypeError: data.map is not a function

Why does this error occur?

This error can occur due to various reasons, such as:

❌ If you are using the map() method in a variable that is not an array.

❌ If you incorrectly pass a non-array object to map() method.

How to fix “typeerror data map is not a function”?

To fix the “typeerror: data.mapis not a function” error, you should ensure that the variable you are calling the .map() method on is an array.

Here are the following solutions you can use to get rid of this error:

Solution 1: Check if the variable is an array before calling the .map() method

You can easily check if the data is an array using the Array.isArray() method before calling the .map() method.

const data = 'Welcome to Itsourcecode!';

if (Array.isArray(data)) {
  data.map(item => console.log(item));
} else {
  console.log('Error: the data is not an array');
}

Output:

Error: the data is not an array

Solution 2: Use a for loop instead of map

When your data is not an array and cannot convert to one, you can use a for loop to achieve the same result as the map() method.

let data = {a: 1, b: 2, c: 3, d: 4, e:5};
let doubledData = [];

for (let key in data) {
    doubledData.push(data[key] * 2);
}

console.log(doubledData);

Output:

[ 2, 4, 6, 8, 10 ]

Solution 3: Convert the variable to an array using the spread operator

When the variable is not an array but contains iterable elements.
You can convert it to an array using the spread operator.

const data = 'Itsourcecode';
const dataArray = [...data];

dataArray.map(item => console.log(item));

Output:

I
t
s
o
u
r
c
e
c
o
d
e

Solution 4: Use Array.prototype.slice() method

You can also use the Array.prototype.slice() method to convert a non-array object with a length property to an array.

const data = {0: 'Hi!', 1: 'Welcome to Itsourcecode', length: 2};
const dataArray = Array.prototype.slice.call(data);

dataArray.map(item => console.log(item));

Output:

Hi!
Welcome to Itsourcecode

Solution 5: Use Object.values() and map

When data is an object and you want to use the map() method on its values.

You can use the Object.values() method to get an array of the object’s values and then use the map method on that array.

let data = {a: 1, b: 2, c: 3, d: 4, e:5};
let doubledData = Object.values(data).map(x => x * 2);
console.log(doubledData);

Output:

[ 2, 4, 6, 8, 10 ]

Conclusion

The “typeerror: data.map is not a function reactjs” is an error message that occurs when you are trying to use the map() method on a variable that is not an array.

This article already provides different solutions above so you can fix the error message immediately.

We are hoping that this article provided you with sufficient solutions to get rid of the error.

You could also check out other “typeerror” articles that may help you in the future if you encounter them.