ThomasThiebaud ThomasThiebaud - 25 days ago 10
React JSX Question

Random image link render the same across a list of element

I'm using

react-toolbox
and I would like to render a list (
List
) of items (
ListItem
) with random images as an avatar. I found this link http://lorempixel.com/ which allow you to easily get a random image.

My item looks like

<ListItem
avatar={'http://lorempixel.com/50/50'}
caption={name}
/>


and each time I create a new item I have a random image like this

enter image description here

But if I refresh the page, all the images become the same

enter image description here

All my items are different, so why are the image the same ? If I refresh again an again, the image change, but it is still the same for all the items.

Answer

Most probably having the same URL, the browser will not download the image again for each occurrence, so you should add a unique identifier:

<ListItem
  avatar={`http://lorempixel.com/50/50?${Math.random()`}
  caption={name} 
/>
Comments