У меня есть элемент <p>{percent_change_24h}</p>, и нужно построить условие, если переменная percent_change_24h больше 0, то цвет - зелёный, а если меньше 0 - то красный. Как это можно реализовать через условный рендеринг или функцию? Не разобрался.
Подскажите, пожалуйста! Буду благодарен!
если переменная percent_change_24h больше 0, то цвет - зелёный, а если меньше 0 - то красный
Такое реализовать можно вот таким образом...
//
function App() {
const percent_change_24h = -10
const s = {}
if (percent_change_24h > 0) s.color = 'green'
if (percent_change_24h < 0) s.color = 'red'
return <p style={s}>{percent_change_24h}</p>
}
const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>