import React, {useEffect, useState } from 'react';
const Calculadora = () => {
// Estado para almacenar los datos del formulario
const [formulario, setFormulario] = useState({
numero1: 0,
numero2: 0
});
const [suma, setSuma] = useState(0);
const [multiplicacion, setMultiplicacion] = useState(0);
useEffect(() => {
console.log('El componente se ha montado por primera vez');
}, []); // Array vacío indico que se ejecute una sola vez, al montar (renderizar) el componente
useEffect(() => {
console.log(formulario);
}); // Si parámetros se ejecuta cada vez que renderizamos el componente: cuidado con poner cosas que fuercen a enderizar
useEffect(() => {
console.log('El formulario ha cambiado');
setSuma(formulario.numero1 + formulario.numero2) // Esto va con retraso
setMultiplicacion(formulario.numero1 * formulario.numero2) // Esto va con retraso
}, [formulario]); // Array con propiedades indico que se ejecute cuando cambian esas propiedades
// Función para manejar cambios en los campos de entrada
const handleInputChange = (event) => {
const { name, value } = event.target;
setFormulario({
...formulario,
[name]: Number(value)
});
};
return (
<form >
<label>
Numero 1:
<input
type="number"
name="numero1"
value={formulario.numero1}
onChange={handleInputChange}
/>
</label>
<label>
Numero 2:
<input
type="number"
name="numero2"
value={formulario.numero2}
onChange={handleInputChange}
/>
</label>
<h1>{formulario.numero1 + formulario.numero2}</h1>
<h1>{formulario.numero1 * formulario.numero2}</h1>
<h1>{suma}</h1>
<h1>{multiplicacion}</h1>
</form>
);
};
export default Calculadora;