render a react calculator in javascript

index.tsx
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./index.css";

function App() {
  const [result, setResult] = useState("");

  const handleButtonClick = (e) => {
    setResult(result.concat(e.target.name));
  };

  const handleClear = () => {
    setResult("");
  };

  const handleDelete = () => {
    setResult(result.slice(0, -1));
  };

  const handleEqual = () => {
    try {
      setResult(eval(result).toString());
    } catch (error) {
      setResult("Error");
    }
  };

  return (
    <div className="calculator">
      <div className="display">{result}</div>
      <button className="clear" onClick={handleClear}>
        AC
      </button>
      <button className="delete" onClick={handleDelete}>
        Del
      </button>
      <button className="operator" name="+" onClick={handleButtonClick}>
        +
      </button>
      <button className="number" name="1" onClick={handleButtonClick}>
        1
      </button>
      <button className="number" name="2" onClick={handleButtonClick}>
        2
      </button>
      <button className="number" name="3" onClick={handleButtonClick}>
        3
      </button>
      <button className="operator" name="-" onClick={handleButtonClick}>
        -
      </button>
      <button className="number" name="4" onClick={handleButtonClick}>
        4
      </button>
      <button className="number" name="5" onClick={handleButtonClick}>
        5
      </button>
      <button className="number" name="6" onClick={handleButtonClick}>
        6
      </button>
      <button className="operator" name="*" onClick={handleButtonClick}>
        &times;
      </button>
      <button className="number" name="7" onClick={handleButtonClick}>
        7
      </button>
      <button className="number" name="8" onClick={handleButtonClick}>
        8
      </button>
      <button className="number" name="9" onClick={handleButtonClick}>
        9
      </button>
      <button className="operator" name="/" onClick={handleButtonClick}>
        &divide;
      </button>
      <button className="number" name="0" onClick={handleButtonClick}>
        0
      </button>
      <button className="dot" name="." onClick={handleButtonClick}>
        .
      </button>
      <button className="equal" onClick={handleEqual}>
        =
      </button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
2407 chars
90 lines