React: How to use inline styles in conditional rendering?

Question

How do I handle the following:

const SpeedTest = ({ speed }) => (
  <div {speed > 80 ? {{style=color:red}} : {{style=color:green}} }>
    {speed > 80 ? "Too fast!" : "All fine"}
  </div>
);

Conditional text change works fine, but I am not able to get the color change done.

score 1 · Answer 1 · answered Dec 30 '19 at 08:58

1

This is what you are looking for

const SpeedTest = ({ speed }) => (
  <div style={{ color: speed > 80 ? "red" : "green" }}>
    {speed > 80 ? "Too fast!" : "All fine"}
  </div>
);

answered Dec 30 '19 at 08:58

Moinul Hossain

2,096
23
29

score 1 · Accepted Answer · answered Dec 30 '19 at 08:59

1

You can do like this (remember to use quotes around inline styling values):

const SpeedTest = ({ speed }) => (
  <div style={{ color: speed > 80 ? 'red' : 'green' }}>
    {speed > 80 ? "Too fast!" : "All fine"}
  </div>
);

answered Dec 30 '19 at 08:59

ah, I need to set the condition inside of the style declaration - that does the trick. thank you! – JonSnow Dec 30 '19 at 09:10

score 1 · Answer 3 · answered Dec 30 '19 at 09:01

1

Corrected

const SpeedTest = ({ speed }) => (
  <div style={{color: speed>80 ?'red':'green'}}>
    {speed > 80 ? "Too fast!" : "All fine"}
  </div>
);

answered Dec 30 '19 at 09:01

akhtarvahid

8,226
2
18
27

score 1 · Answer 4 · answered Dec 30 '19 at 09:05

1

you can hold style in the variable and then change its value based on condition

  const SpeedTest = ({ speed }) => {
   let style={}
     if(speed>80){
        style={color:'red'}
     }else{
        style={color:'green'}
     }
    return (
      <div style={style}>
         {speed > 80 ? "Too fast!" : "All fine"}
     </div>
    )
   };

answered Dec 30 '19 at 09:05

Jatin Parmar

2,272
5
16
27

1

nice approach as well, thanks! – JonSnow Dec 30 '19 at 09:18

React: How to use inline styles in conditional rendering?

4 Answers4