Uncaught TypeError: map is not a function-CodePudding

Hello people i'm having some issues with map in React, i have some data from a Json but when i trying to do a map interaction it's doesn't work.

/* component where the map is */

const Directory = (categories) => {
  return (
    <div className='directory-container'>
      {categories.map((category) => (
        <CategoryItem key={category.id} category={category} />
      ))}
    </div>
  );
};

/Json/

export const categories = [
  {
    id: 1,
    title: "hats",
    imageUrl: "https://i.ibb.co/cvpntL1/hats.png",
  },
  {
    id: 2,
    title: "jackets",
    imageUrl: "https://i.ibb.co/px2tCc3/jackets.png",
  },
  {
    id: 3,
    title: "sneakers",
    imageUrl: "https://i.ibb.co/0jqHpnp/sneakers.png",
  },
  {
    id: 4,
    title: "womens",
    imageUrl: "https://i.ibb.co/GCCdy8t/womens.png",
  },
  {
    id: 5,
    title: "mens",
    imageUrl: "https://i.ibb.co/R70vBrQ/men.png",
  },
];

/*App Component */

const App = () => {

return ; };

CodePudding user response：

If you pass the categories to components as props you should do like this

const const Directory = ({categories}) => {
  return (
    <div className='directory-container'>
      {categories.map((category) => (
        <CategoryItem key={category.id} category={category} />
      ))}
    </div>
  );
};

props name inside the { categories }

CodePudding user response：

You can simply add a check if the value is existing or not. I hope i will help.

const Directory = (categories) => {
  return (
    <div className='directory-container'>
      {categories?.map((category) => (
        <CategoryItem key={category.id} category={category} />
      ))}
    </div>
  );
};