<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;
const ColorChangingText = ({ value }) => {
const newColor = value > 0 ? 'green' : value < 0 ? 'red' : 'black';
<p style={{ color: newColor, transition: 'color 0.3s' }}>{value}</p>
const [value, setValue] = useState(5);
const incrementValue = () => {
const decrementValue = () => {
<div className='container'>
<h3>React Js Change Color of Text based on its Positive or Negative Value</h3>
<ColorChangingText value={value} />
<button onClick={incrementValue}>Increment Value</button>
<button onClick={decrementValue}>Decrement Value</button>
ReactDOM.render(<App />, document.getElementById('app'));
/* Your existing styles here */
/* Additional style for smoother color transitions */