import React, { useState } from 'react'; import Numero from './Numero' const Contador = () => { // Quiero variables dentro de una página de react tengo que utilizar estado const [contador, setContador] = useState(0); const [cadena, setCadena] = useState("") const incrementarContador = () => { setContador(contador + 1); setCadena("") }; const decrementarContador = () => { if (contador>0) { setContador(contador - 1); }else{ setCadena("No puedes poner número negativos") } }; const resetearContador = () => { setContador(0); setCadena("") }; return ( <div> <Numero numero={contador} resetear={resetearContador}/> <p> {cadena}</p> <button onClick={incrementarContador}>Incrementar</button> <button onClick={decrementarContador}>Decrementar</button> <button onClick={() => setContador(0)}>Reset</button> </div> ); }; export default Contador;
import './Numero.css' function Numero({ numero, resetear }) { return <h1 onClick={resetear}>{numero}</h1> } export default Numero;