how to sum two inputs with React hooks?

Question

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>
    )
};

Tracker1 · Accepted Answer · 2021-10-06 21:30:52Z

2

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>
    )
};

edited Oct 6, 2021 at 21:30

Tracker1

19.4k12 gold badges85 silver badges106 bronze badges

answered Jan 16, 2021 at 10:46

Luís Mestre

1,9281 gold badge15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ecoplaneteer · Accepted Answer · 2021-01-16 10:42:27Z

0

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>
    )
};

answered Jan 16, 2021 at 10:42

ecoplaneteer

1,9841 gold badge12 silver badges29 bronze badges

1 Comment

ljbc1994 Over a year ago

You can use the useMemo hook instead to return the value to a const rather than having to use useEffect and useState, i.e. const result = useMemo(() => (parseInt(input.num1) + parseInt(input.num2)), [input])

Ackerman27 · Accepted Answer · 2021-10-06 21:26:48Z

0

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>;
}

answered Oct 6, 2021 at 21:26

Ackerman27

19313 bronze badges

Collectives™ on Stack Overflow

how to sum two inputs with React hooks?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related