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;