Map in react js

Question

I'm trying to map but I don't manage to map orders here. It's written cannot read property of undefined but products work.

This is my class:

const p = products.map(p => {
  return (
    <Product
    key={p._id}
    product={p}
    />
  );
});
const o = orders.map(o => {
  return (
    <div
    key={o._id}
    product={p}
    />
  );
});

This is the console log of the object:

Where does orders come from? The second item in the array you posted? — jsdeveloper
– jsdeveloper, Commented Mar 15, 2019 at 23:17
There is an array inside an array. You expect there to be a single object in each item in your array. — Taavi Kivimaa
– Taavi Kivimaa, Commented Mar 15, 2019 at 23:24

IfSoGirl · Accepted Answer · 2019-03-16 17:38:48Z

2

In second map you should change product={p} to product={o}. P is unknown variable there.

const o = orders.map(o => {
  return (
    <div
    key={o._id}
    product={o}
    />
  );
});

edited Mar 16, 2019 at 17:38

answered Mar 16, 2019 at 17:27

IfSoGirl

1611 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hemadri Dasari · Accepted Answer · 2019-03-16 17:45:08Z

0

As @IfSoGirl mentioned you need to supply o but not p to product prop in second map method

Further to that, here is your simplified map functions. Since it’s single jsx element under map so no need of return syntax

   const p = products.map(p => <Product key={p._id} product={p}/>);

   const o = orders.map(o => <div key={o._id} product={o}/>);

answered Mar 16, 2019 at 17:45

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Collectives™ on Stack Overflow

Map in react js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related