In react, have this:
return (
<tag>
{ variable ?
<p> hello </p>
:
<p> world </p>
}
</tag>
)
As you can see, I am doing a ternary operator to output content depending on variable. I want to add style attribute in the p tag, like this:
<p style="color:#DF0101;font-weight:bold;"> hello </p>
But it doesn't work. I also tried:
<p style={{color:"#DF0101", font-weight:"bold"}}>
What am I doing wrong?
It's not font-weight but fontWeight, you need to use camelCase notation
<p style={{color:"#DF0101", fontWeight:"bold"}}>
The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.
There is a logic error in your example code. The css are not updated, only the text. So use the ternary to change the text.
<p style={{ color:"#DF0101", fontWeight:"bold" }}>
{{ lockPost === true ? 'Not ready' : 'Ready!' }}
</p>
You cannot have dashes in a JS variable (or key, in this case). You want to use your second example, but replace all dashes with camelCase, like this:
<p style={{ color:"#DF0101", fontWeight:"bold" }}>
If you try this, it will work:
<p style={{color:"#DF0101", fontWeight:"bold"}}>
You should write it with camelCase.
font-weight => fontWeight
