How to Fix the ‘Uncaught TypeError: props.data.map is not a function’ Error When Developing a React App?

Sometimes, we want to fix the ‘Uncaught TypeError: props.data.map is not a function’ Error when developing a React app.

In this article, we’ll look at how to fix the ‘Uncaught TypeError: props.data.map is not a function’ Error when developing a React app.

Fix the ‘Uncaught TypeError: props.data.map is not a function’ Error When Developing a React App

To fix the ‘Uncaught TypeError: props.data.map is not a function’ Error when developing a React app, we should make sure props.data.map is an array before calling map.

For instance, we can write:

import React from "react";

const Foo = (props) => {
  return (
    <div>
      {Array.isArray(props.data) && props.data.map((d) => <p key={d}>{d}</p>)}
    </div>
  );
};

export default function App() {
  return <Foo data={[1, 2, 3]} />;
}

to create the Foo component that uses the Array.isArray method to check if props.data is an array before calling the map method on it.

This way, map won’t be called is props.data isn’t an array.

Conclusion

To fix the ‘Uncaught TypeError: props.data.map is not a function’ Error when developing a React app, we should make sure props.data.map is an array before calling map.