Tengo una aplicación de contador simple que estoy practicando. Lo tengo configurado para que cada vez que se presione Aumentar o Disminuir, el conteo cambie en consecuencia. Pero quiero contar cuántas veces se hace clic en cada botón en números enteros positivos. Mi problema ahora es que siempre que Count esté por debajo de 0, numCount se restará. No estoy seguro de lo que estoy haciendo mal:
import './style.css'; import Count from './things.js'; export default function App() { const [count, setCount] = useState(0); const getColor = () => { if (count === 0) return '#112a42'; return count < 0 ? 'red' : 'green'; }; const num = (numCount) => { if (numCount >= 0) return numCount; if (numCount < 0) return numCount * - 1; }; return ( <div className="container"> <div className="main"> <Count text="What's the count?"/> <h1 style={{ color: getColor() }} className="number"> {count} </h1> <div className="buttons"> <button type="button" className="decrease" onClick={() => setCount(count - 1)} > Decrease </button> <button type="button" className="reset" onClick={() => setCount(0)} > Reset </button> <button type="button" className="increase" onClick={() => setCount(count + 1)} > Increase </button> </div> <p className="paragraph"> You clicked {num(count)} times</p> </div> </div> ); }```Aquí hay un ejemplo mínimo verificable.
React.useState se usa para contar cada estado plus y minus .plus - minusplus + minussetPlus(0) y setMinus(0) function App() { const [plus, setPlus] = React.useState(0) const [minus, setMinus] = React.useState(0) function reset(event) { setPlus(0) setMinus(0) } return <div> <button type="button" onClick={_ => setMinus(minus + 1)} children="-" /> {plus - minus} <button type="button" onClick={_ => setPlus(plus + 1)} children="+" /> <br /> total clicks: {plus + minus} <br /> <button type="button" onClick={reset} children="reset" /> </div> } ReactDOM.render(<App/>, document.querySelector("#app")) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script> <div id="app"></div>