How to do Addition inside a addClick function

user_17808039 0
Viewed 63

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;
reactjs
4 Answers

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

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"/>
user_164937590

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.

Admin1

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>
user_142992290
Related