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.

Related Blogs

ckeditor

How to Integrate Custom Build CKEditor5 with React

Explains how to create a custom build CKEditor5 and integrate with react with sample code.

Objects Are Not Valid as a React Child

React objects are not valid as a react child

The React error "Objects are not valid as a React child" occurs when we render an object or an array in our JSX code. We can't use JavaScript objects as a child in React.

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.