array is not mapping in react js

Question

I keep getting this error while I have tried everything according to my knowledge any kind of help will be appreciated.

I try to pass the array in props then get in component and set props value in the state but when I try to map that array this error shows up:

TypeError: Cannot read property 'map' of undefined

onClick function:

const handleClickOpen = (data) => {
  setOpen(true);
  setPropsData(data);
};

Event handler:

onClick={() => {
  handleClickOpen({
    name: item.firstName,
    image: item.image,
    about: item.about,
    id: item._id,
    interests: item.intersets,
  });
}}

Component passing props:

<ProfileDialog
  selectedValue={propsData}
  open={open}
  onClose={handleClose}
/>

Component declares props like so:

const { onClose, selectedValue, interests, open } = props;

I got the error when I put in this statement:

<div>{selectedValue.interests.map((item,i) => console.log(item,i))}</div>

Try this <div>{selectedValue?.interests.map((item,i) => console.log(item,i))}</div> — Ala Hamadi
– Ala Hamadi, Commented Aug 7, 2021 at 11:17
I can't tell much with that much code example. You might want to verify if selectedValue.interests is an array. Try logging them first. — Ryan Le
– Ryan Le, Commented Aug 7, 2021 at 11:17
wait I just try but I don't know how to share code on the sandbox. — hania
– hania, Commented Aug 7, 2021 at 11:18

Amruth · Accepted Answer · 2021-08-07 11:33:55Z

2

Until you set the value interests are undefined. do null check before access.

selectedValue?.interests?.map

It is recommended to do null check before accessing nested objects, Optional chaining will help us in this regard.

edited Aug 7, 2021 at 11:33

answered Aug 7, 2021 at 11:17

Amruth

5,9122 gold badges30 silver badges41 bronze badges

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

1 Comment

Andy Over a year ago

Might be worth pointing out/adding documentation for optional chaining so your answer is more clear.

Collectives™ on Stack Overflow

array is not mapping in react js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related