Adding style attribute in react

Question

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?

Possible duplicate of [React.js inline style best practices](https://stackoverflow.com/questions/26882177/react-js-inline-style-best-practices) — lux, Jun 17 '19 at 14:57

R3tep · Accepted Answer · 2019-09-27T14:28:25.927

5

It'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 comments

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>

edited Sep 27 '19 at 14:28

answered Jun 17 '19 at 13:24

R3tep

12,512
10
48
75

1

Still did not work, here is my [exact code](https://pastebin.com/jR2qmbH6). Am I missing something? – Henrik Petterson Jun 17 '19 at 13:28
His code is completely fine. See [here](https://repl.it/@Kozandmo/CriticalZigzagEquipment) – Kobe Jun 17 '19 at 13:36

Kobe · Answer 2 · 2019-06-17T13:28:49.107

3

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" }}>

edited Jun 17 '19 at 13:28

answered Jun 17 '19 at 13:24

Kobe

6,226
1
14
35

1

Still did not work, here is my [exact code](https://pastebin.com/jR2qmbH6). Am I missing something? – Henrik Petterson Jun 17 '19 at 13:28
This code works for me. Are there any errors in your console? – Kobe Jun 17 '19 at 13:31
Check this [repl.it](https://repl.it/@Kozandmo/CriticalZigzagEquipment) @HenrikPetterson – Kobe Jun 17 '19 at 13:36

score 0 · Answer 3 · answered Jun 17 '19 at 13:49

0

If you try this, it will work:

<p style={{color:"#DF0101", fontWeight:"bold"}}>

You should write it with camelCase.

font-weight => fontWeight

answered Jun 17 '19 at 13:49

Erçin Dedeoğlu

4,950
4
49
69

Adding style attribute in react

3 Answers3

Update based on comments

Linked