CODEWITHSUNDEEP
reactjsjsx
Scott Ladd
Scott Ladd

Reputation: 41

How do plug in data inside a url string in React?

I'm trying to get some data from my state passed down into this img src url, and I can't seem to figure how to write it. I've tried using back ticks and the dollar sign. I assume because I'm down in the render part of the Component that won't work. Help me Obi-Wan, you're my only hope.

<img src={'https://openweathermap.org/img/w/{data.weather.icon}.png'} alt='weather condition' />

Upvotes: 1

Views: 78

Answers (2)

Amit Chauhan
Amit Chauhan

Reputation: 6879

you can use Template Literal

<img src={`https://openweathermap.org/img/w/${data.weather.icon}.png`} alt='weather condition' />

Upvotes: 1

Miroslav Glamuzina
Miroslav Glamuzina

Reputation: 4557

Just like with vanilla JS, you have to use a Template Literal and use string interpolation to place your JS within the string (with a ${...}) like so:

<img src={`https://openweathermap.org/img/w/${data.weather.icon}.png`} alt='weather condition' />

Upvotes: 1

Related Questions