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;