Reactで電卓の作成

import 
{React,useState} 
from "react";
function Calculator(){

    var [currentVal, setVal] = useState(() => "Enter");
    var [inputNums,addNums] = useState([]);
    
    function arrRepr(){
        var result = "";
        for(let i = 0;i<inputNums.length;i++){
            result += inputNums[i];
            result += "\n";
        }
        return(
             <div>
                <p>{result}</p>
            </div>
            )
    }

    function plus(){
        setVal(currentVal + "+");
    }
    function minus(){
        setVal(currentVal + "-");
    }
    function multi(){
        setVal(currentVal + "*");
    }
    function division(){
        setVal(currentVal + "/");
    }

    function press0(){
        if (currentVal === "Enter"){
            
            currentVal = "";
        }
        setVal(currentVal + "0");
    }
    function press1(){
        if (currentVal === "Enter"){
            currentVal = "";
        }
        setVal(currentVal + "1");
    }

    function press2(){
        if (currentVal === "Enter"){
            currentVal = "";
        }
        setVal(currentVal + "2");
    }
    function press3(){
        if (currentVal === "Enter"){
            currentVal = "";
        }
        setVal(currentVal + "3");
    }
    function press4(){
        if (currentVal === "Enter"){
            currentVal = "";
        }
        setVal(currentVal + "4");
    }

    function press5(){
        if (currentVal === "Enter"){
            currentVal = "";
        }
        setVal(currentVal + "5");
    }

    function press6(){
        if (currentVal === "Enter"){
            currentVal = "";
        }
        setVal(currentVal + "6");
    }
    function press7(){
        if (currentVal === "Enter"){
            currentVal = "";
        }
        setVal(currentVal + "7");
    }
    
    function press8(){
        if (currentVal === "Enter"){
            currentVal = "";
        }
        setVal(currentVal + "8");
    }

    function press9(){
        if (currentVal === "Enter"){
            currentVal = "";
        }
        setVal(currentVal + "9");
    }



    function enter(){
        setVal(currentVal);
        addNums(inputNums + [currentVal]);
        for (let i = 0;i<inputNums.length;i++){
            console.log(inputNums[i] + "S");
        }

        setVal("");
    }

    function clear(){
        setVal("");
        addNums([]);
    }
    return(
        <div>
            <h1 className="currentVal">Current valval = {arrRepr()}</h1>
            <h1 className="currentVal">Current result = {} </h1>
        <div className="st1">
            <h1>{currentVal}</h1>
            <br></br>
            <button onClick={press1} className = "subdiv_button"> 1 </button>
            <button onClick={press2} className = "subdiv_button"> 2 </button>
            <button onClick={press3} className = "subdiv_button"> 3 </button>
            <button onClick={plus} className = "plus_button"> + </button>
            <br></br>
            <button onClick={press4} className = "subdiv_button"> 4 </button>
            <button onClick={press5} className = "subdiv_button"> 5 </button>
            <button onClick={press6} className = "subdiv_button"> 6 </button>
            <button onClick={minus} className = "minus_button"> - </button>
            <br></br>
            <button onClick={press7} className = "subdiv_button"> 7 </button>
            <button onClick={press8} className = "subdiv_button"> 8 </button>
            <button onClick={press9} className = "subdiv_button"> 9 </button>
            <button onClick={multi} className = "multi_button"> x </button>
            <br></br>
            <button onClick={press0} className = "subdiv_button"> 0 </button>
            <button onClick={enter} className = "subdiv_button">= </button>
            <button onClick={division} className = "subdiv_button"> ÷ </button>
            <button onClick={clear} className = "subdiv_button"> Clear </button>
            
        </div>

        </div>
       
    );
}


export default Calculator;

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.st1{
  color: white;
  position: relative;
  background: gray;
  margin-right: 500px;
  margin-left:500px;
}
.currentVal{
  color: blue;
  margin-right: 500px;
  margin-left:500px;
}

.plus_button{
  color: red;
  width: auto;
}

.minus_button{
  color: red;
  width: auto;
}

.multi_button{
  color: red;
  width: auto;
}

.subdiv_button{
  color: red;
  width: auto;
}

import ReactDOM from 'react-dom/client';
import './index.css';

import Calculator from "./App";
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Calculator />
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();