Map object in array of objects react-image-gallery problem

Question

I want to use react-image-gallery when structure looks like this:

let images = [{original: '1.jpg', thumbnail: '1.jpg'}, {original: '2.jpg', thumbnail: '2.jpg'}, ... ];

<ImageGallery items={images}/>

In my case:

const somObj = {name: 'some-name', photos: ['/somObj/1.jpg', '/somObj/2.jpg', ...]};

I tried to map like this:

<ImageGallery items={[
somObj.map(item=> ({ original: item, thumbnail: item }) )
]}/>

I've also tried it differently, but it still doesn't work.

Joe Lloyd · Accepted Answer · 2020-03-04 16:21:15Z

1

You are mapping at the wrong level

You can only use map on an array so go inside your object and into the photo's array. You also don't need the array brackets around the map since map returns an array already.

<ImageGallery items={somObj.photos.map(item => ({ original: item, thumbnail: item }))}/>

answered Mar 4, 2020 at 16:21

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

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

Comments

elvira.genkel · Accepted Answer · 2020-03-04 16:23:16Z

0

your someObj is not an array, array is photos inside someObj:

<ImageGallery items={[
somObj.photos.map(item=> { return {original: item, thumbnail: item }})
]}/>

answered Mar 4, 2020 at 16:23

elvira.genkel

1,3331 gold badge6 silver badges12 bronze badges

Collectives™ on Stack Overflow

Map object in array of objects react-image-gallery problem

2 Answers 2

You are mapping at the wrong level

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

You are mapping at the wrong level

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related