conditional styling in React

Question

In React can I do something like this:

style={ $post.type === "team_member" ? backgroundColor : "green"}

How can I style according to a condition in React?

Thank you in advance!

Possible duplicate of [Correct way to handle conditional styling in React](https://stackoverflow.com/questions/35762351/correct-way-to-handle-conditional-styling-in-react) — Dominic, Nov 22 '18 at 16:57

score 3 · Accepted Answer · answered Nov 22 '18 at 16:42

3

You can, and it's close to what you already have;

style={{backgroundColor: $post.type === "team_member" ? 'green': 'not_a_team_member'}}

The style attribute expects an object, hence the double {}, you're only assigning the value of backgroundColor conditionally, so the conditional is the value of the key backgroundColor in the object.

Hope this helps!

answered Nov 22 '18 at 16:42

Mike Donkers

3,461
1
20
33

Hi! After removing the $ symbol, it is working like charm! So, thanks for your help! – Alex Horvath Nov 22 '18 at 16:56

score 2 · Answer 2 · edited Oct 22 '20 at 13:44

2

You can do something like this:

<div style={{ visibility: this.state.post.type === 'team_member'? 'green': ''}}></div>

edited Oct 22 '20 at 13:44

Badal Saibo

1,212
8
15

answered Nov 22 '18 at 16:42

Akhter Al Amin

762
1
9
25

score 1 · Answer 3 · answered Nov 26 '21 at 21:51

1

You can do something like this:

<div style={ post.type === "team_member" ? {backgroundColor : "green" }: '' }}></div>

answered Nov 26 '21 at 21:51

Chris

720
1
8
17

conditional styling in React

3 Answers3