Solución calculadora

import React, { 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);

    // Función para manejar cambios en los campos de entrada
    const handleInputChange = (event) => {
        const { name, value } = event.target;
        setFormulario({
            ...formulario,
            [name]: Number(value)
        });

        setSuma(formulario.numero1 + formulario.numero2) // Esto va con retraso
        setMultiplicacion(formulario.numero1 * formulario.numero2) // Esto va con retraso

    };


    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

Juan Pablo Fuentes

Formador de programación y bases de datos