close

[Solved] × TypeError: Cannot read properties of undefined (reading ‘map’)

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error × TypeError: Cannot read properties of undefined (reading ‘map’) in reactjs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How this error occurs ?

Here is I am facing this error.

           {items.map((items) => (
              <Grid item key={items.id} item xs={12} sm={6} md={4} lg={3}>
                <Product />
              </Grid>
            ))};

How To Solve × TypeError: Cannot read properties of undefined (reading ‘map’) Error ?

  1. How To Solve × TypeError: Cannot read properties of undefined (reading 'map') Error?

    To Solve × TypeError: Cannot read properties of undefined (reading 'map') Error There is a prop “items” in your component. That variable has higher priority than the map you have outside, and your .map is using it. I would recommend to rename one of them, to avoid variables with the same name.

  2. × TypeError: Cannot read properties of undefined (reading 'map')

    To Solve × TypeError: Cannot read properties of undefined (reading 'map') Error There is a prop “items” in your component. That variable has higher priority than the map you have outside, and your .map is using it. I would recommend to rename one of them, to avoid variables with the same name.

Solution 1: rename one of variable to avoid variables with the same name

There is a prop “items” in your component. That variable has higher priority than the map you have outside, and your .map is using it. I would recommend to rename one of them, to avoid variables with the same name.

Solution 2: Just make sure that you’re passing the props in the component

The props items that you’re passing your component (Items) are undefined. The Map method is taking in account the items that you have passed as props not the one that you have created outside the component itself. If you want to map out the items array that you created outside of your components then just change its name as the array has the same name as the props passed. If you want to use the items(from the prop) then make sure that you’re passing the props in the component.

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read