0

Alright, so I have 3 different Avatars that I want to be randomly assigned to users but constantly so for each user, what I decided was best is to modulus the user id by 3 and set to whatever that is, so this is the code

<img src={`Avatar${user_id % 3}`}/>

However, the src is being parsed as a string, rather than a reference to my imported Avatar3 To clarify, the result I'd like is what would be normally coded as <img src={Avatar3} /> But what I'm getting is what would be coded as <img src="Avatar3" />

How can I fix this? thanks!

Omar Hussein
  • 1,057
  • 2
  • 13
  • 31

1 Answers1

1

You can create a imageMap and reference that.

const imageMap = {
  1: Avatar1,
  2: Avatar2,
  3: Avatar3,
}

<img src={imageMap[user_id % 3]}/>
Amit Chauhan
  • 6,151
  • 2
  • 24
  • 37
  • I was hoping to do it on a one-liner like I was attempting but I guess that's not possible, your answer works fine tho, thanks ! – Omar Hussein Jan 06 '20 at 09:21