how to use and in the properties section of the html element in react?

Question

I had a situation like if 1st name exists in the obj , I need to do some more styling to that div so I am thinking like using and operator in react like this , if name exists add id to the div , but it is showing error

<div {obj["name"][0] && id="feature-border"} className="rectangle"> </div>

can anyone help me , how to use and in the properties section of the html element in react ??

Answer 1

<div {obj["name"][0] && id="feature-border"} className="rectangle"> </div>

Change this line of code to,

<div id={obj["name"][0] ? "feature-border" : ""} className="rectangle"> </div>

Or

<div id={obj["name"][0] ? "feature-border" : null} className="rectangle"> </div>