CODEWITHSUNDEEP
javascriptcssreactjs
Nimsara Akash
Nimsara Akash

Reputation: 3

How do I pass props value to inline css in react.js

I want to pass props value to inline css.

Here is my code

function Thread(props) {
return(
    <div
    class="img"
    style={{ backgroundImage: "url(Assets/thread-1.webp)" }}
  ></div>
)}

I want to replace the value image url using {props.ThreadImageUrl} But I don't know how to write JS inside inline css.

Here is what I want to achieve.

function Thread(props) {
return(
    <div
    class="img"
    style={{ backgroundImage: {props.ThreadImageUrl} }}
  ></div>
)}

I tried JavaScript string Concatenation but it doesn't work. I'm still newbie to Js and React framework. Glad if someone can help me on this.

Upvotes: 0

Views: 53

Answers (1)

S.Marx
S.Marx

Reputation: 1032

You should do:

backgroundImage: `url(${props.ThreadImageUrl})`,

Upvotes: 1

Related Questions