Object's property not available (undefined) inside Array.map

Question

I have a "photos" array of "photo" object. Each "photo" object has a property value for the image url.

I try to iterate over the "photos" array with map(), in this way

photos.map((photo, index) => {
    console.log(photo)
    console.log(photo.value)
    return (
        <img
            key={index}
            src={photo.value}
            className={index === active ? 'active' : ''}
            alt="thumbnail"
        />
    )
})

For some reason that I'm completely missing, photo.value is not available.

This is what those two console.log print out:

console.log output

It seems the object is available, but then the "value" property returns undefined.
This was supposed to be very simple but I'm completely stuck at this point.

How can this be possible? What am I missing here?

Thanks

Looks like it's photo.photo.value, you print the photo object, but that itself is an object with a "photo" property — Jayce444
– Jayce444, Commented Feb 6, 2019 at 11:19
Like pointed out by @Jayce444, the name of a callback value has no relation to the object,. To save any confusion, it might be best to rename your photo callback parameter to say item, then you would have item.photo.value, and that would just make more sense, than photo.photo. Alternatively you could destructure the photo param,.. photos.map(({photo}, index) => — Keith
– Keith, Commented Feb 6, 2019 at 11:24

tvankith · Accepted Answer · 2019-02-06 11:26:53Z

1

access value like this photo.photo.value

photos.map((photo, index) => {
    console.log(photo)
    console.log(photo.photo.value)
    return (
        <img
            key={index}
            src={photo.photo.value}
            className={index === active ? 'active' : ''}
            alt="thumbnail"
        />
    )
})

answered Feb 6, 2019 at 11:26

tvankith

3311 gold badge5 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Object's property not available (undefined) inside Array.map

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related