TypeError: map() is not a function in React

The error “TypeError: map() is not a function” in React occurs when we call the map() function on a value other than an array. The map() function can only be applied to arrays.

let us explain the error with below sample code. 

import React from 'react';

export default function App() { 
	const data = {
		products:[
			"Phone",
			"Laptop"
		]
	};
	// This throws an error: TypeError: map() is not a function
	return (<>
			{data.map(element => {
        		return <h2 key={element}>{element}</h2>;
      		})}
		</>);
}

In the above code, we are applying the map function to the data variable which is an object and not an array. So it will throw the error “Uncaught TypeError: data.map is not a function”. The map function can be applied to the product property of data object which is an array. The below code will solve the error.

import React from 'react';

export default function App() { 
	const data = {
		products:[
			"Phone",
			"Laptop"
		]
	};
	return (<>
			{data.products.map(element => {
        		return <h2 key={element}>{element}</h2>;
      		})}
		</>);
}

A common scenario where this error occurs is when we work with API response data. When we expect an array from the API response and made a map function in the response data, API sent other datatypes leading to the above error. So this data needs to be checked and confirm it is an array and parsed accurately within our React app.

Check Value is an Array

We can avoid the error by conditionally checking whether the value is an array or not using the Array.isArray method. The Array.isArray() is a static method that determines whether the passed value is an Array or not. The Array.isArray() method returns true if the value is an Array and otherwise,  it returns false. It does not check the value's prototype chain. It returns true for a value that created using the array literal syntax or the Array constructor.

import React from 'react';

export default function App() { 
	const data = {
		products:[
			"Phone",
			"Laptop"
		]
	};
	return (<>
		{Array.isArray(data.products) ? data.products.map(element => {
				return <h2 key={element}>{element}</h2>;
			}) : ''}
	</>);
}

Here we checked variable is an array or not using Array.isArray method. If it is not an array, then we can return an empty value.

If we have an array-like object and we are trying to convert it to an array, then use the Array.from() method before calling the map method. And If we are trying to iterate over an object, use the Object.values() method to get an array of the values on which you can call the map() method as given below.

import React from 'react';

export default function App() { 
	const data = {
		vehicle:"car",
		color:"red",
		price:1000 
	};
	return (<>
		{Object.values(data).map(element => {
				return <h2 key={element}>{element}</h2>;
			})}
	</>);
}

The Object.values() method returns an array of a given object's property values.

Conclusion

To solve “TypeError: map() is not a function” in React, make sure we are calling the map function in an array in which the .map function is only available. Use Array.isArray method to conditionally check the value in the variable is an array or not before applying the map function.