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

avatar
Borislav Hadzhiev

Last updated: Apr 7, 2024
4 min

banner

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

The "TypeError: map is not a function" occurs when we call the map() method on a value that is not an array.

To solve the error, console.log the value you're calling the map() method on and make sure to only call map on valid arrays.

map is not a function react

Here is an example of how the error occurs.

App.js
const App = () => { const obj = {}; // โ›”๏ธ Uncaught TypeError: map is not a function return ( <div> {obj.map(element => { return <h2>{element}</h2>; })} </div> ); }; export default App;
The code for this article is available on GitHub

We called the Array.map() method on an object and got the error back.

# Make sure the value is an array before calling map()

To solve the error, console.log the value you're calling the map method on and make sure it's a valid array.

App.js
export default function App() { // ๐Ÿ‘‡๏ธ The variable stores an array const arr = ['bobby', 'hadz', 'com']; return ( <div> {arr.map((element, index) => { return ( <div key={index}> <h2>{element}</h2> </div> ); })} </div> ); }

rendered array successfully

The code for this article is available on GitHub

The arr variable now stores an array, so we can call the Array.map() method without any issues.

# Check if the value is an array before calling map()

You can conditionally check if the value is an array by using the Array.isArray method.

App.js
const App = () => { const obj = {}; return ( <div> {Array.isArray(obj) ? obj.map(element => { return <h2>{element}</h2>; }) : null} </div> ); }; export default App;

We used the ternary operator, which is very similar to an if/else statement.

If the value is an array, we return the result of calling the map method on it, otherwise, we return null.

This way you won't get an error, even if the value is not an array.

If the value is fetched from a remote server, make sure it is of the type you expect it to be by logging it to the console.

Ensure you have parsed the value to a native JavaScript array before calling the map method on it.

You can also use a condition inside the map() method.

# Initialize your state to an array

If your array is stored in a state variable, pass an initial value of an empty array to the useEffect hook.

App.js
import {useState} from 'react'; const App = () => { const [employees, setEmployees] = useState([]); return ( <div> {employees.map((element, index) => { return ( <div key={index}> <h2>{element}</h2> </div> ); })} <button onClick={() => setEmployees(['Alice', 'Bobby', 'Carl'])} > Update state </button> </div> ); }; export default App;

set state array

The code for this article is available on GitHub

The useEffect hook takes an optional parameter and initializes the state variable to the supplied value.

The employees variable is set to an empty array initially and you can use the setEmployees function to update the state.

# Convert array-like objects to an array

If you have an array-like object, use the Array.from() method to convert it to an array before calling map().

App.js
const App = () => { const set = new Set(['bobby', 'hadz', 'com']); return ( <div> {Array.from(set).map(element => { return ( <div key={element}> <h2>{element}</h2> </div> ); })} </div> ); }; export default App;

We used the Array.from() method to convert the value to an array before calling map().

This would also work for array-like objects like the NodeList returned from calling the getElementsByClassName method.

# Use Object.keys() to iterate over an object

If you are trying to iterate over an object, use the Object.keys() method to get an array of the object's keys on which you can call the map() method.

App.js
export default function App() { const employee = { id: 1, name: 'Bobby Hadz', salary: 100, }; return ( <div> {/* ๐Ÿ‘‡๏ธ iterate object KEYS */} {Object.keys(employee).map((key) => { return ( <div key={key}> <h2> {key}: {employee[key]} </h2> <hr /> </div> ); })} <br /> <br /> <br /> {/* ๐Ÿ‘‡๏ธ Iterate the object's VALUES */} {Object.values(employee).map((value, index) => { return ( <div key={index}> <h2>{value}</h2> <hr /> </div> ); })} </div> ); }

iterate over object

The code for this article is available on GitHub

We used the Object.keys() method to get an array of the object's keys.

App.js
const employee = { id: 1, name: 'Alice', salary: 100, }; // ๐Ÿ‘‡๏ธ ['id', 'name', 'salary'] console.log(Object.keys(employee)); // ๐Ÿ‘‡๏ธ [1, 'Alice', 100] console.log(Object.values(employee));

We can only call the map() method on arrays, so we need to either get an array of the object's keys, or the object's values.

You can read more on how to map through an object in React in this article.

# If you have an object with an array property, access the property

The employee object has a tasks property of type array which we had to access before calling the Array.map() method.

App.js
const App = () => { const employee = { name: 'bobby hadz', tasks: ['develop', 'test', 'ship'], }; return ( <div> {employee.tasks.map(element => { return ( <div key={element}> <h2>{element}</h2> </div> ); })} </div> ); }; export default App;
The code for this article is available on GitHub

The map() method should only be called on arrays.

If the error persists, console.log the value you are calling map() on and make sure it's a valid array.

If the error persists, click on the following article and follow the instructions.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev