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

Question

[frolldoll]

У меня есть следующий код:

renderCrypto(obj,index){
            return(
                <div key={index} className='col-md-3'>
                    <button type="button" className="btn btn-light">
                          <a style={{ color: "rgb(2, 214, 19)" }}>({obj.percent_change_24h})%</a>
                    </button>
                </div>
            )}

В obj.percent_change_24h храниться значение - например (2%) или (-2%)
Как сделать проверку например если там -2% то color будет red?

Answer 1

[TheLostRoot]

renderCrypto(obj,index){
           const percentColor = obj.percent_change_24h === -2'  ? 'red' : 'rgb(2, 214, 19);
            return(
                <div key={index} className='col-md-3'>
                    <button type="button" className="btn btn-light">
                          <a style={{ color: percentColor }}>({obj.percent_change_24h})%</a>
                    </button>
                </div>
            )}

Comments

[frolldoll]

Значение может быть любое , нужно проверку на наличие минуся сделать

[Роман Александрович]

frolldoll,

const percentColor = obj.percent_change_24h < 0   ? 'red' : 'rgb(2, 214, 19)';

Answer 2

[0xD34F]

renderCrypto(obj) {
  const percent = obj.percent_change_24h;
  const color = percent < 0 ? 'red' : 'rgb(2, 214, 19)';

  return (
    <div className='col-md-3'>
      <button type="button" className="btn btn-light">
        <a style={{ color }}>({ percent })%</a>
      </button>
    </div>
  );
}