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

Question

When I try to run this code it gives me this error:

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

Why does it happen? How can I make it work?

import React from 'react';
import Grid from '@material-ui/core/Grid';

import Product from './Product/Product';
import useStyles from './styles';

const products = [
  {id: 1, name: 'Shoes', description: 'Running Shoes.' },
  {id: 2, name: 'MacBook', description: 'Apple MacBook.' },
];

const Products = ({ products }) => {
  const classes = useStyles();

  return (
    <main className={classes.content}>
      <div className={classes.toolbar} />
      <Grid container justify="center" spacing={4}>
        {products.map((products) => (
          <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}>
            <Product />
          </Grid>
        ))};
      </Grid>
    </main>
  );
};

export default Products;

First time I see this error in its new wording on SO ^^ still feels unreal that this super-common error message was changed due to a bug I opened with v8. For people unaware of it: it means exactly the same as `Cannot read property 'map' of undefined` did. — CherryDT, Sep 06 '21 at 22:02
The message change will obscure many years of error message search results. @CherryDT Interesting bug you found originally though. — Adam Thompson, Oct 19 '21 at 23:02
@CherryDT what was the original bug? Have a link to the GH issue? I would be interested to see the history of this change — no_stack_dub_sack, Nov 12 '21 at 01:44
@no_stack_dub_sack https://bugs.chromium.org/p/v8/issues/detail?id=11365 — CherryDT, Nov 12 '21 at 08:54

score 129 · Answer 1 · answered Nov 17 '21 at 17:47

129

I had the same error and solved it by first asking if the array existed.

Example:

<Filter>
  { product.color?.map((c) => (
    <FilterColor color = {c} key = {c} />
  ))};
</Filter>

answered Nov 17 '21 at 17:47

jake

1,391
1
8
2

7

Yes... but why does this work? – Trees4theForest Oct 30 '22 at 05:42
1

`product.color?` checks if `product.color` exists and maps only then over the array. – Claim Mar 21 '23 at 12:12
1

@Trees4theForest it’s a known “Safe Navigation Operator”, which makes sure that we will not get null and/or undefined values, can be used to prevent from throwing errors, when trying to access object properties of an object that don’t exist. [wiki](https://en.wikipedia.org/wiki/Safe_navigation_operator) – Daria Shvydka Aug 16 '23 at 10:41
Insteed of this, it will also work { product.color && product.color.map((c) => ( ))}; – Shiplu Aug 22 '23 at 07:09

score 15 · Answer 2 · edited Oct 17 '21 at 13:20

15

There is a property "products" 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.

Given the error, I would guess that that property wasn't passed to the component.

Also, the parameter of the map lambda is "products" too. Change it to "product", or it will fail.

edited Oct 17 '21 at 13:20

Peter Mortensen

30,738
21
105
131

answered Sep 06 '21 at 22:01

Iván

971
6
20

2

You can see these issues clearly in the following replication: https://codesandbox.io/s/typeerror-cannot-read-properties-of-undefined-reading-map-00jv1?file=/src/App.js – Moshe Jonathan Gordon Radian Sep 06 '21 at 22:05

score 9 · Answer 3 · edited Aug 15 '22 at 20:22

9

You are getting a blank array[]. For this, you are facing this error. You can solve this problem two ways:

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

Or

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

edited Aug 15 '22 at 20:22

Peter Mortensen

30,738
21
105
131

answered Jun 25 '22 at 05:12

Md. Shafiqul Islam

196
1
4
9

score 7 · Answer 4 · edited Oct 17 '21 at 13:25

The properties, products, that you're passing to your component (Products) are undefined. The Map method is taking in account the products that you have passed as properties is not the one that you have created outside the component itself.

If you want to map out the products array that you created outside of your components then just change its name as the array has the same name as the properties passed. If you want to use the products (from the property) then make sure that you're passing the properties in the component.

score 6 · Answer 5 · edited Oct 17 '21 at 13:30

It's because you have taken the array "products" and the map item "products" by the same name. Change the map item to something else like "product":

const products = [
        {id: 1, name: 'Shoes', description: 'Running Shoes.' },
        {id: 2, name: 'MacBook', description: 'Apple MacBook.' },
    ];

const Products = ({ products }) => {
  const classes = useStyles();

  return (
    <main className={classes.content}>
      <div className={classes.toolbar} />
      <Grid container justify="center" spacing={4}>
        {products.map((product) => (
          <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}>
            <Product/>
          </Grid>
        ))};
      </Grid>
    </main>
  );
};

score 5 · Answer 6 · edited Jan 03 '23 at 02:17

Use:

const Products = ({ products }) => {
  const classes = useStyles();

  return (
    <main className={classes.content}>
      <div className={classes.toolbar} />
      <Grid container justify="center" spacing={4}>
        {products && products.map((products) => (
          <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}>
            <Product />
          </Grid>
        ))};
      </Grid>
    </main>
  );
};

Just add "products &&". This will check if the map is defined or not.

score 3 · Answer 7 · edited Aug 15 '22 at 20:17

3

Write it in this way and the issue would be resolved:

<Grid container justify="center" spacing={4}>
  {products ?.map((product) => (
    <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}>
      <Product/>
    </Grid>
  ))};
</Grid>

edited Aug 15 '22 at 20:17

Peter Mortensen

30,738
21
105
131

answered May 25 '22 at 06:29

Bhupendra Singh

31
1

score 2 · Answer 8 · edited Oct 17 '21 at 13:28

Make sure to pass the products properties into the Product component. Change this:

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

to this:

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

Why? Because you're mapping an object (products) into a JSX element in your case which is the <Product/> component, so using { product.id } you're trying map an undefined object. Then make sure the products property you're trying to map out, is correctly passed into the parent component using the Products component.

score 2 · Answer 9 · edited Aug 15 '22 at 20:10

Step 1: Add loading into user page - use useState

{const [loading, setLoading] = useState(true);}

Step 2: Set loading value to false at the end of async fetch function. If you’re using the try-catch method, put this code line inside the try method:

  {   setLoading(false)}

Step 3: Use a unary operation in the inside the render() part of the code

{ loading ? (
  <h2>loading</h2>
) :  {/* Enter code here */}}

score 2 · Answer 10 · edited Jan 03 '23 at 02:15

2

Use:

 { product.color?.map((c) => (
    <FilterColor color = {c} key = {c} />
  ))};

This would fix the issue, but why does it appear well behind the scene? React won't update the state immediately. This concept is called scheduling, and that is why when you access products.map, products are an empty array.

edited Jan 03 '23 at 02:15

Peter Mortensen

30,738
21
105
131

answered Sep 19 '22 at 10:32

Bilal Mohmand

31
5

1

Does this answer make any sense? – Peter Mortensen Jan 03 '23 at 02:15

score 1 · Answer 11 · edited Aug 15 '22 at 19:57

1

At first, please check that products are exported. If yes, then change

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

to

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

Because here you map products as products, so you have to set the key like products.id.

edited Aug 15 '22 at 19:57

Peter Mortensen

30,738
21
105
131

answered Nov 19 '21 at 04:15

Faizan Arif

99
5

Perhaps mark the literal parts with italics (so it is clear what is and what isn't literal)? (But ***without*** "Edit:", "Update:", or similar - the answer should appear as if it was written today.) – Peter Mortensen Aug 15 '22 at 19:58

score 1 · Answer 12 · edited Aug 15 '22 at 19:57

1

You had named each iteration of the map method with products, but you are using product to catch each instance of the iteration.

edited Aug 15 '22 at 19:57

Peter Mortensen

30,738
21
105
131

answered Dec 11 '21 at 10:13

Mushahid

11
2

score 1 · Answer 13 · edited Aug 15 '22 at 20:13

1

You should basically check the values received are undefined or not.

In Angular, you can use something like this: {{person?.name}}.

edited Aug 15 '22 at 20:13

Peter Mortensen

30,738
21
105
131

answered May 05 '22 at 11:22

Sagar M

1,168
13
10

score 1 · Answer 14 · edited Aug 15 '22 at 20:20

1

You can replace the map part like this:

{(products|| []).map(product) => ( // Your code ))}

edited Aug 15 '22 at 20:20

Peter Mortensen

30,738
21
105
131

answered Jun 05 '22 at 14:50

Mohit Singh

11
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 06 '22 at 02:25
That's Brillant, I was having similar issue and your solution works for me :) – Karim Elnemr Jul 01 '22 at 16:09

score 1 · Answer 15 · edited Aug 15 '22 at 20:24

1

Use:

  <Grid container justify="center" spacing={4}>
    {products && products.map((products) => (
      <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}>
        <Product />
      </Grid>
    ))};
  </Grid>

Here changes in products && products.map() instead of products.map().

edited Aug 15 '22 at 20:24

Peter Mortensen

30,738
21
105
131

answered Jun 28 '22 at 07:20

riddhi dobariya

11
1

score 1 · Answer 16 · answered Aug 26 '22 at 09:57

1

Make sure properties is not undefined.

typeof products.map() !== undefined

answered Aug 26 '22 at 09:57

JUGG

41
3

score 1 · Answer 17 · answered Oct 30 '22 at 23:39

1

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

// add "products &&" before the map method

answered Oct 30 '22 at 23:39

Programmer Injamam

39
6

score 0 · Answer 18 · answered Oct 28 '21 at 15:44

0

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

answered Oct 28 '21 at 15:44

Ahmed eltarouty

55
2

5

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Ahmet Emre Kilinc Oct 28 '21 at 17:46
I had a similar problem which this approach solved. Although unlike the hard coded `products` array in this question I was fetching an array of data from a database. Anyway, the idea is that `products && products.map(.....` is first checking to make sure that `products` isn't undefined (or has a truthy value at least). If it's undefined, the `products.map` won't execute. – DC1477 Nov 19 '21 at 08:43

score 0 · Answer 19 · edited Aug 15 '22 at 20:05

Sometimes, it gives an error when you haven't used the variable of useState.

And I have made two other components. 1) Tour 2) Tours

 const [tours, setTours ] = useState([]);

Now, I have used this tours variable in App.js file using Tours components.

App.js

I have used tours in the App.js file.

App.js

Now, I'm taking the tours variable for using the .map() function in the Tours.js file.

const Tours = ({ tours }) => {
/...
{tours.map()
.../

Tours.js

You have to check that both files have the same spelling. Otherwise, it gives an error and also doesn’t work the UI of that particular file.

score 0 · Answer 20 · edited Aug 15 '22 at 20:05

0

You should try this:

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

edited Aug 15 '22 at 20:05

Peter Mortensen

30,738
21
105
131

answered Jan 11 '22 at 12:35

Morteza Mazrae

40
8

6

Please add an explanation for your answer – Dylan Kerler Jan 11 '22 at 12:55

score 0 · Answer 21 · edited Aug 15 '22 at 20:12

You had this kind of error because you don't pass any information (props) inside the product component. So try this:

return (
    <main className={classes.content}>
      <div className={classes.toolbar} />
      <Grid container justify="center" spacing={4}>
        {products.map((products) => (
          <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}>
            <Product product={product} />
          </Grid>
        ))};
      </Grid>
    </main>
  );
};

score 0 · Answer 22 · answered Dec 11 '22 at 21:05

const Products = ({ products }) => {
  const classes = useStyles();

  return (
    <main className={classes.content}>
      <div className={classes.toolbar} />
      <Grid container justify="center" spacing={4}>
        {products?.map((products) => (
          <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}>
            <Product />
          </Grid>
        ))};
      </Grid>
    </main>
  );
};

score -1 · Answer 23 · edited Oct 17 '21 at 13:26

Check INITIAL_STATE in the reducer.

You must specify an array in the ID object you are calling in the reducer.

Example:

const INTIAL_STATE = {
    products: [],
    product: { name: "", brand_name: "", prices: "", color: "", images: []},
    error: "",
}

product.images.map(img => {
    return(
        <div key = {img.id} className = "img-itemm">
            <img src = {img.image} alt = {img.image} />
        </div>
    )
})

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

23 Answers23

Linked

Related