How to change the text in react depending on the value?

Question

React

Hello, I want to make it so that if the value is 0, then the color becomes red.. Here's how I did it, but it doesn't work)

<p style={{color: "{ (this.state.petrol > 0) ? '#ffffff' : '#D12828'}" }}>{this.state.petrol}l</p>

Answer 1

const color = this.state.petrol > 0 ? "#FFF" : "#D12828";

return (
  <p style={{ color }}>{this.state.petrol}</p>
);

Answer 2

<p style={{color: this.state.petrol > 0 ? '#ffffff' : '#D12828' }}>{this.state.petrol}l</p>