Ejemplos de useEffect en Calculadora

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;

Publicado por

Avatar del usuario

Juan Pablo Fuentes

Formador de programación y bases de datos