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

I want to pass props value to inline css.

Here is my code

function Thread(props) {
return(
    <div
    
    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
    
    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.

CodePudding user response：

You should do:

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