Reactアプリ100本ノックやってみた 「05 Calc」

はじめに

フロントエンドに苦手意識のある私が、@Sicut_studyさんの【Reactアプリ100本ノック】をやってみました。
変なところがあれば教えていただきたいです。

今回の課題

やってみる

App.tsx

import React, { useState } from "react";

const App = () => {
  const [input, setInput] = useState("");

  const handleClick = (value: string) => {
    setInput((prevValue) => prevValue + value);
  };

  const handleCalculate = () => {
    try {
      setInput(eval(input).toString());
    } catch (error) {
      setInput("エラー");
    }
  };

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

  return (
    <div>
      <div>
        <input type="text" value={input} readOnly />
      </div>
      <div>
        <button onClick={() => handleClick("7")}>7</button>
        <button onClick={() => handleClick("8")}>8</button>
        <button onClick={() => handleClick("9")}>9</button>
        <button onClick={() => handleClick("/")}>/</button>
      </div>
      <div>
        <button onClick={() => handleClick("4")}>4</button>
        <button onClick={() => handleClick("5")}>5</button>
        <button onClick={() => handleClick("6")}>6</button>
        <button onClick={() => handleClick("*")}>*</button>
      </div>
      <div>
        <button onClick={() => handleClick("1")}>1</button>
        <button onClick={() => handleClick("2")}>2</button>
        <button onClick={() => handleClick("3")}>3</button>
        <button onClick={() => handleClick("-")}>-</button>
      </div>
      <div>
        <button onClick={() => handleClick("0")}>0</button>
        <button onClick={() => handleClick(".")}>.</button>
        <button onClick={handleCalculate}>=</button>
        <button onClick={() => handleClick("+")}>+</button>
      </div>
      <div>
        <button onClick={handleClear}>C</button>
      </div>
    </div>
  );
};

export default App;

完成

おわりに

eval()を使ってしまっています。セキュリティ的に良くないらしいので注意です。