How to do Addition inside a addClick function-CodePudding

Please help me out what to do here to make addition of two numbers. When I click on addClick function, it is not making addition. when I type 2 and 2, it is showing 22 not 4. please help me out what to do here. I am new here.

App.jsx:

import React, {useState} from 'react';

function App(){

  const [number1, setNumber1] = useState('');
  const [number2, setNumber2] = useState('');
  const [headingText, setHeading] = useState('');

  function handleChange(event) {
    setNumber1(event.target.value);
    setNumber2(event.target.value);

  }

  function addClick(event){
    let sum;
    sum = number1   number2;
    setHeading(sum);
    event.preventDefault();
  }


  return (
    <div>
      <form>
        <label htmlFor="number1">Number1</label>
        <input onChange={handleChange} type="number"/>
        <label htmlFor="number2">Number2</label>
        <input onChange={handleChange} type="number"/>
        <button onClick={addClick} type="submit">Add</button>
        <button type="submit">Subtract</button>
        <button type="submit">Multiplication</button>
        <button type="submit">Division</button>
        <h1>Result: {headingText}</h1>
      </form>
    </div>
  );
}
export default App;

CodePudding user response：

Replace the statements:

setNumber1(event.target.value);
setNumber2(event.target.value);

with 

setNumber1(parseInt(event.target.value));
setNumber2(parseInt(event.target.value));

OR

setNumber1(event.target.valueAsNumber);
setNumber2(event.target.valueAsNumber);

CodePudding user response：

Just replace the input value with Number. With the current structure, it is difficult to get the desired result because your input values change at the same time. When you type in Number1, Number1 and Number2 are changed at the same time.

  function handleChange(event) {
    setNumber1(event.target.value);
    setNumber2(event.target.value);
  }

<input onChange={handleChange} type="number"/>
<input onChange={handleChange} type="number"/>

change

  function handleChange1(event) {
    setNumber1(event.target.valueAsNumber);
  }

  function handleChange2(event) {
    setNumber2(event.target.valueAsNumber);
  }

  <input onChange={handleChange1} value={number1} type="number"/>
  <input onChange={handleChange2} value={number2} type="number"/>

CodePudding user response：

You don't really need to use form here, since you store the values in state, you can just perform the tasks easily like so.

<button onClick={addClick}>Add</button>

CodePudding user response：

One more alternative is that you can change the way in which you are defining the number1 in useState.

You can define them like

const [number1, setNumber1] = useState(0);
const [number2, setNumber2] = useState(0);

Also you are missing value in input

<input onChange={handleChange} value={number1} type="number"/>
<input onChange={handleChange} value={number2} type="number"/>

And simply use the other code as same.