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

Question

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.

You can use string templates: style={{ backgroundImage: `url(${props.ThreadImageUrl})` }} — secan
– secan, Commented Sep 2, 2022 at 8:48

S.Marx · Accepted Answer · 2022-09-02 08:48:23Z

1

You should do:

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

answered Sep 2, 2022 at 8:48

S.Marx

1,03211 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1