trying to build a simple calculator with react and javascript here is addition function

Question

import { Form, InputGroup, Button } from "react-bootstrap";

export default function About() {

---------------------> i want this function to perform addition but it is shown NaN even though i parseInt...........

**function add() {
    let n1 = parseInt(document.getElementById("num1").value);
    let n2 = parseInt(document.getElementById("num2").value);
    document.getElementById("result").innerHTML = n1 + n2;
}**

return (
    <> <h2>addition function</h2>
        <div className="row">
            <div className="col-6">
                <InputGroup className="mb-3" id="num1">
                    <Form.Control
                        placeholder="number1" />
                </InputGroup>
            </div>
            <div className="col-6">

                <InputGroup className="mb-3" id="num2">
                    <Form.Control
                        placeholder="number2"
                    />
                </InputGroup>
            </div>
            <div className="col-6">

                <InputGroup className="mb-3" id="res">
                    <Form.Control
                        placeholder="answer"
                    />
                </InputGroup>
            </div>
            <Button variant="dark" onClick={add} >Add</Button>
        </div>
    </>
);

}

Answer 1

You can introduce three state for numberOne, numberTwo and for total using useState hook as:

  const [numberOne, setNumberOne] = useState(0);
  const [numberTwo, setNumberTwo] = useState(0);
  const [total, setTotal] = useState(0);

CODESANDBOX LINK

on click of button Add you just have to set total as value to setTotal as:

  function add() {
    setTotal(numberOne + numberTwo);
  }

You can change input as of type number so tha user can only input of type number

<Form.Control
              type="number"
              placeholder="number1"
              value={numberOne}
              onChange={(e) => setNumberOne(+e.target.value)}
            />

FULL CODE

function About() {
  const [numberOne, setNumberOne] = useState(0);
  const [numberTwo, setNumberTwo] = useState(0);
  const [total, setTotal] = useState(0);
  function add() {
    setTotal(numberOne + numberTwo);
  }

  return (
    <>
      <h2>addition function</h2>
      <div className="row">
        <div className="col-6">
          <InputGroup className="mb-3" id="num1">
            <Form.Control
              type="number"
              placeholder="number1"
              value={numberOne}
              onChange={(e) => setNumberOne(+e.target.value)}
            />
          </InputGroup>
        </div>
        <div className="col-6">
          <InputGroup className="mb-3" id="num2">
            <Form.Control
              type="number"
              placeholder="number2"
              value={numberTwo}
              onChange={(e) => setNumberTwo(+e.target.value)}
            />
          </InputGroup>
        </div>
        <div className="col-6">
          <InputGroup className="mb-3" id="res">
            <Form.Control placeholder="answer" value={total} />
          </InputGroup>
        </div>
        <Button variant="dark" onClick={add}>
          Add
        </Button>
      </div>
    </>
  );
}

export default function App() {
  return (
    <div className="App">
      <About />
    </div>
  );
}