Как в react изменить текст в зависимости от значения?

Question

[nikmil]

Здравствуйте, хочу сделать так что если значение равно 0 то цвет становится красным.. Вот примерно как я сделала, но это не работает)

<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>
);

Comments

[nikmil]

А вот еще вопрос, только с текстовым значением. Как нужно написать чтобы цвет текста тоже изменялось?

constructor(props) {
    super(props)
    this.state = {

      door: false
      }
  }

const colordoor = this.state.door ? "#FFF" : "#D12828";

return (
<div className="txt"> <p style={{ colordoor }}>{this.state.door} { this.state.door ? "Открыто" : "Закрыто" }</p></div>
);

[Петр Мухуров]

nikmil, а где здесь текстовое значение?

[nikmil]

Петр Мухуров, ну допустим у меня стоит false следовательно будет писаться Закрыто и цвет измениться на красный.

[Петр Мухуров]

const color = this.state.door ? "green" : "red";

Answer 2

[Иван В]

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