学習メモ

削除ボタンの作成

1. mapのindexを受け取って、どの削除ボタンが押されたか判断する
2. splice() を使ってリストから削除
3. setOutputText に新しいリストを入れて更新

import classes from "./styles/App.module.scss";
import { useState, useRef } from "react";

export const App = () => {
  const inputElement = useRef<HTMLInputElement>(null);
  const [outputText, setOutputText] = useState<string[] | null>([]);

  const onClickAddButton = () => {
    if (inputElement.current?.value === "") return; // フォームに入力された文字が空白の場合は何もしない

    // フォームに入力した値を配列に入れる
    const newTexts = [...outputText!, inputElement.current!.value];
    setOutputText(newTexts);

    // フォームに入力した値をリセットする
    inputElement.current!.value = "";
  }

  const onClickDeleteButton = (i: number) => {
    const newTexts = [...outputText!];
    newTexts.splice(i, 1);
    setOutputText(newTexts);
  }

  return(
    <div className={classes.container}>
      <h1 className={classes.title}>簡単メモアプリ</h1>

      <div className={classes.inputArea}>
        <input ref={inputElement} className={classes.inputAreaTextArea} type="text" placeholder="メモを入力" />
        <button onClick={onClickAddButton} className={classes.inputAreaButton}>追加</button>
      </div>

      <section className={classes.outputArea}>
        <h2 className={classes.outputAreaTitle}>メモ一覧</h2>
        <ul className={classes.outputAreaList}>
          {
            outputText!.map((listItem: string, i: number) => 
              <li className={classes.outputAreaListItem} key={i}>
                <span>{listItem}</span>
                <button onClick={() => onClickDeleteButton(i)}>✕</button>
              </li>          
            )
          }
        </ul>
      </section>
    </div>
  );
};

所感

すべての機能が揃ったので
次回はコンポーネント化・カスタムフック化をしてみます。