React.js Error: "TypeError: Cannot read property 'map' of undefined"

Here's the relevant code snippet where the error is occurring:

import React from 'react';

const MyComponent = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default MyComponent;

I'm passing an array of items as a prop to MyComponent, but it seems that items is undefined when the component renders. I've checked the data source and ensured that it is not empty.

What could be causing this error, and how can I fix it?

Thanks in advance for your help!

I'm encountering an error in my React.js project and I'm not sure how to resolve it. The error message I'm receiving is: "TypeError: Cannot read property 'map' of undefined".

Map actually works on array only , above error arrive while using map on something that isn't an array

ways to solve

1: console.log(items) and check if that works properly and gives you an array

2 : use Optional Chaining to fix this issue this is how you can use

items?.map() and the rest of you code, you can view docs at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

import React from 'react';

const MyComponent = ({ items }) => {
  return (
    <ul>
      {items?.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default MyComponent;

note

optional changing help you prevent app crashes by checking the null value. your map function only works when you get an array .

The main reason of getting undefined is you are not getting values of items while that component is loading.

Way to solve issue :

1. First check if items is coming then try to map the data
2. Use items?.map for null value check