I'm trying to add a reset button to the input (Kind of like CE in a calculator) and i'm having trouble with placing it inside the code.

import { useRef } from "react";
import './App.css';

function App() {
  const a = useRef(0);
  const b = useRef(0);

  const plusaction = () => {
    console.log(a.current.value);
    console.log(b.current.value);
    alert(parseInt(a.current.value)   parseInt(b.current.value));
  };

  const Minusaction = () => {
    console.log(a.current.value);
    console.log(b.current.value);
    alert(parseInt(a.current.value) - parseInt(b.current.value));
  };

  const MultiplyAction = () => {
    console.log(a.current.value);
    console.log(b.current.value);
    alert(parseInt(a.current.value) * parseInt(b.current.value));
  };
  const DivideAction = () => {
    console.log(a.current.value);
    console.log(b.current.value);
    alert(parseInt(a.current.value) / parseInt(b.current.value));
  };

  return (
    <div className="App">
      <header className="App-header">
      <h1> Enter the numbers Down</h1>
      <div>
      <input type="number" ref={a} placeholder="0" />
      <input type="number" ref={b} placeholder="0" />

      </div>
      <div className="margin"><p></p></div>
      <div>
      <button onClick={plusaction}> </button>
      <button onClick={Minusaction}>-</button>
      <button onClick={MultiplyAction}>*</button>
      <button onClick={DivideAction}>/</button>
      </div>
      </header>
    </div>
  );
}

export default App;

Any suggestions for improvment and of course add the CE button? Thank you in advance.

CodePudding user response：

You need to learn how to use useState, using ref in this way is not correct in a react program.

Once you have state clearing the state will be very trivial. Look at any example of useState with textfields

CodePudding user response：

use react useState hook.

When you change a value using the setState function, the value changes automatically where the state is used.

import { useState } from 'react';
import './App.css';

function App() {
  const [valueA, setValueA] = useState(0);
  const [valueB, setValueB] = useState(0);
  const [sum, setSum] = useState(0);

  const handleResult = e => {
    const operator = e.target.textContent;
    switch (operator) {
      case ' ':
        setSum(valueA   valueB);
        return;
      case '-':
        setSum(valueA - valueB);
        return;
      case '*':
        setSum(valueA * valueB);
        return;
      case '/':
        setSum(Math.floor(valueA / valueB));
        return;
      default:
        return;
    }
  };

  const handleValueA = e => {
    const value = e.target.value;
    if (!value) return;
    setValueA(parseInt(value, 10));
  };

  const handleValueB = e => {
    const value = e.target.value;
    if (!value) return;
    setValueB(parseInt(value, 10));
  };

  const handleReset = () => {
    setValueA(0);
    setValueB(0);
    setSum(0);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1> Enter the numbers Down</h1>
        <div>
          <input
            type="number"
            placeholder="0"
            onChange={handleValueA}
            value={valueA}
          />
          <input
            type="number"
            placeholder="0"
            onChange={handleValueB}
            value={valueB}
          />
          <div className="result">{sum}</div>
        </div>
        <div className="margin">
          <p></p>
        </div>
        <div>
          <button onClick={handleResult}> </button>
          <button onClick={handleResult}>-</button>
          <button onClick={handleResult}>*</button>
          <button onClick={handleResult}>/</button>
          <button onClick={handleReset}>reset</button>
        </div>
      </header>
    </div>
  );
}

export default App;