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?
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?
Share Improve this question asked Jun 17, 2019 at 13:22 Henrik PettersonHenrik Petterson 7,11421 gold badges81 silver badges158 bronze badges 2- Should be <p style={{color:"#DF0101", fontWeight:"bold"}}> – PEPEGA Commented Jun 17, 2019 at 13:24
- Possible duplicate of React.js inline style best practices – lux Commented Jun 17, 2019 at 14:57
3 Answers
Reset to default 5It's not font-weight but fontWeight, you need to use camelCase notation
<p style={{color:"#DF0101", fontWeight:"bold"}}>
Ref
The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.
Update based on ments
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