CODEWITHSUNDEEP
javascriptcssreactjs
RandomDeveloper
RandomDeveloper

Reputation: 883

Add background url dynamically in React

I have a js file in my React project that contains data grabbed from an api. That dataset contains a background image url.

That js file controls a lot of pages that are the same, it has been built dynamically so that same page serves a lot of other pages. The idea is that when the api is called the background url is always different from page to page.

How can I grab that background url and ensure that the image changes based on url, for example:

Homepage --> Background Url: homepage.jpg

Quotepage --> Background Url: quote.jpg

In order to have a css style with the background it would be something like this:

.page(dynamic name) {
 background: url("page.jpg"(dynamic name));
}

Both the class and the background url would have to be dynamic so the code knows the url is different for each page.

I don't even know if this is possible to achieve with css since typically you would have to have one class with one background url for each page but thought I'd ask, maybe someone knows a better way, or a way to manipulate the css through jsx?

Upvotes: 0

Views: 461

Answers (1)

Sankshit Pandoh
Sankshit Pandoh

Reputation: 79

Use inline style and state for this.

Declare a backgroudUrl state and update it everytime the route or path changes. And for your css, simply add it in jsx as inline using the state variable.

It should look something like this:

<div classname="page" style={{background: `url(this.state.backgroundUrl)`}} > </div>

Upvotes: 2

Related Questions