React JS how to copy array into object/dictionary array

November 27, 2022

I have the below list represents images sources coming from Flask backend,

[
   "www.example.com","www.example2.com","www.example3.com"...
]

Now I’m trying to use the react react-image-gallery to display all those images. From the tutorial I see I need to make it like below:

const images = [
  {
    original: "www.example.com",
    thumbnail: "www.example.com/thumbnail",
  }
]

I’m confused about how to make the array list of images URLs mapped into this object/dictionary array? Ideally I need to make it like:

const images = [
  {
    original: "www.example.com",
    thumbnail: "www.example.com/thumbnail",
  },
  {
    original: "www.example2.com",
    thumbnail: "www.example2.com/thumbnail",
  },
  {
    original: "www.example3.com",
    thumbnail: "www.example3.com/thumbnail",
  }......
]

Could anyone please enlighten me?
Any help will be much appreciated!

>Solution :

You can map over source array as:

const srcArr = ["www.example.com", "www.example2.com", "www.example3.com"]

const result = srcArr.map(original => ({ original, thumbnail: `${original}/thumbnail`}));
console.log(result)