【ReactHooks】useStateでオブジェクト配列を扱う

Copy
import "./styles.css";
import React, { useState, useRef } from "react";

export default function App() {
  // 初期値
  const initialState = [];

  // 登録input
  const registInput = useRef(null);

  // useState
  const [list, setList] = useState(initialState);

  // 更新内容input入力時のstate更新
  //リストから更新対象のオブジェクトのtargetプロパティのみを更新する
  const inputUpdate = (event, i) => {
    setList(
      // mapで更新対象オブジェクトのみを変更した新規配列を作成し、stateにセットする
      list.map((val, index) =>
        index === i ? { ...val, target: event.target.value } : { ...val }
      )
    );
  };

  // todolistのクリア
  const clear = () => setList(initialState);

  // todolistへの追加
  const add = () => {
    // 値がない場合は追加しない
    if (!registInput.current.value) return;
    setList((prevList) => [
      ...prevList,
      { title: registInput.current.value, target: "" }
    ]);
  };

  // todolistの更新
  const upd = (i) => {
    setList(
      // 更新内容inputを変更した時点でstateの配列に格納されているオブジェクトのtargetは
      // 更新されているため、更新ボタン押下時は更新対象オブジェクトのterget→titleで更新した
      // 新規配列をmapで作成し、stateにセットする
      list.map((val, index) =>
        index === i ? { ...val, title: val.target } : { ...val }
      )
    );
  };

  // todolistの削除
  const del = (i) => {
    setList(list.filter((x, index) => index !== i));
  };

  return (
    <div className="App">
      <h1>todolistの削除</h1>
      <div>
        <input type="text" ref={registInput}></input>
        <button className="button" onClick={add}>
          登録
        </button>
        <button className="button" onClick={clear}>
          クリア
        </button>
      </div>
      <h1 style={{ textAlign: "left" }}>ToDo List</h1>
      <div style={{ textAlign: "left" }}>
        {list.map((todoList, i) => (
          <li key={i}>
            <button className="button" onClick={() => del(i)}>
              削除
            </button>
            ｜{todoList.title}
            <input
              type="text"
              value={todoList.target}
              onChange={(e) => inputUpdate(e, i)}
            ></input>
            <button className="button" onClick={() => upd(i)}>
              更新
            </button>
          </li>
        ))}
      </div>
    </div>
  );
}

Copy
// 初期値
  const initialState = [];

  // useState
  const [list, setList] = useState(initialState);

Copy
// 登録input
  const registInput = useRef(null);

  // ~省略~
  <input
    type="text"
    ref={registInput}
  ></input>

Copy
// todolistへの追加
  const add = () => {
    // 値がない場合は追加しない
    if (!registInput.current.value) return;
    setList((prevList) => [
      // 直前のstateをスプレッド構文で展開
      ...prevList,
      // 新規オブジェクトを追加
      { title: registInput.current.value, target: "" }
    ]);
  };

Copy
// todolistへの追加
  const add = () => {
    // 値がない場合は追加しない
    if (!registInput.current.value) return;
    setList((prevList) => [
      // 新規オブジェクトを追加
      { title: registInput.current.value, target: "" },
      // 直前のstateをスプレッド構文で展開
      ...prevList
    ]);
  };

Copy
// ~
    <input
      type="text"
      value={todoList.target}
      onChange={(e) => inputUpdate(e, i)}
    ></input>
    <button className="button" onClick={() => upd(i)}>
      更新
    </button>
// ~

Copy
// 更新内容input入力時のstate更新
  //リストから更新対象のオブジェクトのtargetプロパティのみを更新する
  const inputUpdate = (event, i) => {
    setList(
      // mapで更新対象オブジェクトのみを変更した新規配列を作成し、stateにセットする
      list.map((val, index) =>
        //indexが一致していればtargetを上書き 
        index === i ? { ...val, target: event.target.value } : { ...val }
      )
    );
  };

Copy
{
    title:"更新前の値（画面に表示のみ）",
    target:"更新後の値（inputに表示）"
}

Copy
// todolistの更新
  const upd = (i) => {
    setList(
      // 更新内容inputを変更した時点でstateの配列に格納されているオブジェクトのtargetは
      // 更新されているため、更新ボタン押下時は更新対象オブジェクトのterget→titleで更新する
      // 新規配列をmapで作成し、stateにセットする
      list.map((val, index) =>
        //indexが一致した場合はtitleをtargetで上書きする 
        index === i ? { ...val, title: val.target } : { ...val }
      )
    );
  };

Copy
// ~
    {list.map((todoList, i) => (
      <li key={i}>
        <button className="button" onClick={() => del(i)}>
          削除
        </button>
        // ~
      </li>
// ~

Copy
// todolistの削除
  const del = (i) => {
    // indexが一致したtodoは除去する
    setList(list.filter((_, index) => index !== i));
  };

Copy
setList((prevList) => [
        ...prevList,
      { title: registInput.current.value, target: "" }
    ]);

Copy
const upd = (i) => {
    setList(
       list.map((val, index) =>
        index === i ? { ...val, title: val.target } : { ...val }
      )
    );
  };

Copy
const del = (i) => {
    setList(list.filter((_, index) => index !== i));
  };