how to randomly display only one 1 image from the array of object

Question

how to display single image randomly? I have created an array of objects where the images are been added now I need to display those images randomly but one at once and it will change in the next reload.

const index= () => {
  let gifGallery=[
    {
      src:'./Images/1.gif',
      value:1
    },
    {
      src:'./Images/2.gif',
      value:2
    },
    {
      src:'./Images/3.gif',
      value:3
    },
    {
      src:'./Images/4.gif',
      value:4
    },
   

  ]
  return (
   <>
   <h1>Gif Gallery</h1>
   <div>
    {
     what should be the logic here?????
    }
   </div>
   </>
  )
}

https://stackoverflow.com/questions/4550505/getting-a-random-value-from-a-javascript-array — pepinillo6969, Jul 04 '22 at 12:21
const currentImage = gifGallery[Math.floor(Math.random() * gifGallery.length)]; — Sameer, Jul 04 '22 at 12:24

score 0 · Answer 1 · answered Jul 04 '22 at 12:19

0

use this code

function getRandomImage(arr) {
  const length = arr.length;
  const randomIndex = Math.floor(length * Math.random())
  return arr[randomIndex]
}

answered Jul 04 '22 at 12:19

Akhil P

1,580
2
20
29

score 0 · Answer 2 · answered Jul 04 '22 at 12:21

0

You can get a random value from an array of objects and use it in your return method.

let gifGallery=[
    {
      src:'./Images/1.gif',
      value:1
    },
    {
      src:'./Images/2.gif',
      value:2
    },
    {
      src:'./Images/3.gif',
      value:3
    },
    {
      src:'./Images/4.gif',
      value:4
    },
  ]
  var randomObject = gifGallery[Math.floor(Math.random() * gifGallery.length)];
  return (
   <>
   <h1>Gif Gallery</h1>
   <div>
    <image src={randomObject.src} alt={randomObject.value} />
   </div>
   </>
  )

answered Jul 04 '22 at 12:21

sedhal

522
4
13

page is blank no images shown – Jul 04 '22 at 12:24
You can check example in codepan which I have created for you > https://codepen.io/sedhal/pen/KKodMVw – sedhal Jul 04 '22 at 12:55

score 0 · Answer 3 · answered Jul 04 '22 at 12:22

use Math.floor(), you can see the docs on this link, I hope this would be helpful. thanks

let gifGallery=[
    {
      src:'./Images/1.gif',
      value:1
    },
    {
      src:'./Images/2.gif',
      value:2
    },
    {
      src:'./Images/3.gif',
      value:3
    },
    {
      src:'./Images/4.gif',
      value:4
    },
   

  ]
  
const randomImage = Math.floor(Math.random() * gifGallery.length)
console.log(randomImage)

const index= () => {
  let gifGallery=[
    {
      src:'./Images/1.gif',
      value:1
    },
    {
      src:'./Images/2.gif',
      value:2
    },
    {
      src:'./Images/3.gif',
      value:3
    },
    {
      src:'./Images/4.gif',
      value:4
    },
   

  ]

  const randomImage = Math.floor(Math.random() * gifGallery.length)

  return (
   <>
   <h1>Gif Gallery</h1>
   <div>
    <img src={gifGallery[randomImage].src} />
   </div>
   </>
  )
}

score 0 · Answer 4 · answered Jul 04 '22 at 12:39

One way would be to generate a random number between 0 and the last index of your image array. Ideally you'd store it in a useState, so that you can change it when you want (say for instance you have a button that says "get random GIF").

You would need a function like this one to generate the randomIdx:

const getRandomIdx = ()  => Math.floor(Math.random() * gifGallery.length)

The way to create such functions is well explained in here.

You would then put in your JSX an <img /> tag, whose src attribute is stored in the src property of the object at gifGallery[randomIdx].


  const gifGallery=[
    {
      src:'./Images/1.gif',
      value:1
    },
    {
      src:'./Images/2.gif',
      value:2
    },
    {
      src:'./Images/3.gif',
      value:3
    },
    {
      src:'./Images/4.gif',
      value:4
    },
 
  ]

const getRandomIdx = ()  => Math.floor(Math.random() * gifGallery.length)

const App = () => {
    const [randomIdx, setRandomIdx] = useState(getRandomIdx())
        
    return (
           <>
               <h1>Gif Gallery</h1>
            <div>
                <img src={gifGallery[randomIdx].src} />
            </div>
            <p>Idx : {randomIdx}</p>
            <button onClick={() => setRandomIdx(getRandomIdx())}>
                get another random one
            </button>
        </>
    )
}

you have a working exemple in this React Playground

how to randomly display only one 1 image from the array of object

4 Answers4

Linked

Related