CODEWITHSUNDEEP
javascriptreactjsreact-hooks
florci1
florci1

Reputation: 71

how to sum two inputs with React hooks?

i’m trying to sum two inputs and give a result with a button , i have defined the state hooks and they work but i don’t know how to pass the current state to a function and sum it. Can you please help me? i’m a beginner here’s my code:


import React from 'react';


export default function Suma (){
    //hook defined
    const [input, setInput] = React.useState({
        num1: "",
        num2: "",
    });

    //handle input change 

    const handleInput = function(e){
        setInput({
            ...input, 
            [e.target.name]: e.target.value
        });
    };

    //suma function

    const suma = function(){
     
    }

    return (
        <div>
            <input onChange={handleInput} name="num1" value={input.num1} type="text"></input>
            <input onChange={handleInput} name="num2" value={input.num2} type="text"></input>
            <button>+</button>
            <span>resultado</span>
        </div>
    )
};

Upvotes: 0

Views: 7078

Answers (3)

Lu&#237;s Mestre
Lu&#237;s Mestre

Reputation: 1938

If you only want to show the result on click, I think this should be enough

export default function Suma (){
    //hook defined
    const [input, setInput] = React.useState({
        num1: "",
        num2: "",
    });

    const [result, setResult] = React.useState("")

    //handle input change 

    const handleInput = function(e){
        setInput({
            ...input, 
            [e.target.name]: e.target.value
        });
    };

    //suma function

    const suma = function(){
        const { num1, num2 } = input;
        setResult(Number(num1) + Number(num2));
    }

    return (
        <div>
            <input onChange={handleInput} name="num1" value={input.num1} type="number"></input>
            <input onChange={handleInput} name="num2" value={input.num2} type="number"></input>
            <button onclick={suma}>+</button>
            <span>resultado: {result}</span>
        </div>
    )
};

Upvotes: 2

Badr Kacimi
Badr Kacimi

Reputation: 158

function AddForm() {
  const [sum, setSum] = useState(0);
  const [num, setNum] = useState(0);

  function handleChange(e) {
    setNum(e.target.value);
  }

  function handleSubmit(e) {
    setSum(sum + Number(num));
    e.preventDefault();
  }

  return <form onSubmit={handleSubmit}>
  <input type="number" value={num} onChange={handleChange} />
  <input type="submit" value="Add" />
  <p> Sum is {sum} </p>
  </form>;
}

Upvotes: 0

ecoplaneteer
ecoplaneteer

Reputation: 1984

import React from 'react';


export default function Suma (){
    //hook defined
    const [input, setInput] = React.useState({
        num1: "",
        num2: "",
    });
    const [sum, setSum] = React.useState(undefined)

    useEffect(() => {
       setSum(parseInt(input.num1) + parseInt(input.num2))
    }, [input])

    //handle input change 

    const handleInput = function(e){
        setInput({
            ...input, 
            [e.target.name]: e.target.value
        });
    };

    return (
        <div>
            <input onChange={handleInput} name="num1" value={input.num1} type="text"></input>
            <input onChange={handleInput} name="num2" value={input.num2} type="text"></input>
            <button>+</button>
            {sum !== undefined && <span>{sum}</span>}
        </div>
    )
};

Upvotes: 0

Related Questions