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

はじめに

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

今回の課題

やってみる

App.tsx

import { useState } from "react";

const App = () => {
  const [todolist, setTodoList] = useState<string[]>([]); // todoリスト
  const [input, setInput] = useState(""); // 入力欄

  const addtodo = () => {
    if (input !== "") {
      setTodoList([...todolist, input]);
      setInput("");
    } else {
      alert("入力してください。");
    }
  };

  // クリックしたボタンに紐づくtodoを削除
  const deleteList = (index: number) => {
    const deleteList = [...todolist];
    deleteList.splice(index, 1);
    setTodoList(deleteList);
  };

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      {/* todoリスト配列に要素を追加する */}
      <button onClick={addtodo}>追加</button>
      {/* todoリスト*/}
      <div>
        {todolist.map((todo, index) => {
          return (
            <div>
              <span>{todo}</span>
              <button
                onClick={() => {
                  deleteList(index);
                }}
              >
                削除
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default App;

完成

おわりに

見た目が簡素すぎるのですが、要件満たしたのでいったん完了とします。
引き続き頑張ります。