【React】配列内の特定のオブジェクト内の配列に値を追加したい

Question

実現したいこと

現在、2階層の ToDo アプリを作成しているのですが、2階層目の新しい要素を追加する処理のロジックがうまく実装できません。
どのように論理立てて実装するかがわかっていない段階です。

発生している問題・分からないこと

具体的な処理の流れを理解できていません。
下記に現状の簡易的な処理を書きます。

下記のソースコードが今回のはまっている問題の処理を簡略化したものなのですが、Child.jsxのinputに値を入力したときにlistsの特定のオブジェクトのsubListsに追加したいのですが、その処理について理解できません。

例えばuseStateでsubListsは定義していませんが、これはChild.jsx内で定義する必要があるのでしょうか？それともinputの値を親に渡して親に関数処理を記述するべきでしょうか？

ただ仮にそれを言語化できたとしても、実装のロジックを組み立てることができるのかもわかりません。

該当のソースコード

const listsDefault = [
  {
    title: 'タイトル1',
    isCompleted: false,
    subLists: [
      {
        item: 'タイトル1 のアイテム1',
        isCompleted: false,
      },
      {
        item: 'タイトル1 のアイテム2',
        isCompleted: false,
      },
    ],
  },
  {
    title: 'タイトル2',
    isCompleted: false,
    subLists: [
      {
        item: 'タイトル2 のアイテム1',
        isCompleted: false,
      },
      {
        item: 'タイトル2 のアイテム2',
        isCompleted: false,
      },
    ],
  },
];

const Parent = () => {
  const [lists, setLists] = useState(listsDefault);

// ここに関数が書いてありますが省略しています

  return (

      // 1階層目のリストや特定のリストをクリックすることで2階層目の特定のリストが表示されるコンポーネントが書かれていますが、今回は省略します

　　// listNum は関数処理は省略していますが、1階層目の特定のリストをクリックすることで変化する数値の値です。
      <SubLists lists={lists} listNum={listNum} /> します
  );

};

export default Parent;

const SubLists = ({ lists, listNum }) => {
  return (
    <>
      <main >
        <form>
          <input placeholder="タスクを入力..." />
        </form>
        <ul>
          // 2階層目のToDoがリストで表示されます
          {lists[listNum].subLists.map((list, index) => (
            <li key={index}>
              <span>{list.item}</span>
            </li>
          ))}
        </ul>
      </main>
    </>
  );
};

export default SubLists;

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

様々な情報やデバックなどを試みてみたのですが、理解できませんでした。

補足

特になし

Answer 1

複雑なステートを取り扱う必要があるので TypeScript の型注釈を勝手に使用して、コードの意味が不明瞭になるような一部の変数・プロパティ名を勝手に書き換え等していますが…

このように、SubTasks コンポーネントに、コールバック形式の onAddSubTask Prop を追加して、form の onSubmit のイベントハンドラ中でこのコールバック関数を呼び出して、そのときに input から抽出した値を渡してあげることによって実現できます。

import { type FC } from "react";
import { SubTaskDetail, type TaskDetail } from "./taskdetail";

type Props = {
  task: TaskDetail;
  onAddSubTask: (task: SubTaskDetail) => void;
};

export const SubTasks: FC<Props> = ({ task, onAddSubTask }) => {
  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          const formData = new FormData(e.currentTarget);
          const title = formData.get("title");
          if (typeof title !== "string") return;
          if (title === "") return;
          onAddSubTask({ item: title, isCompleted: false });
        }}
      >
        <input name="title" placeholder="タスクを入力" />
      </form>

      {task.subTasks.map(/*省略*/)}
    </div>
  );
};

TaskDetail と SubTaskDetail の型定義

export type TaskDetail = {
  title: string;
  isCompleted: boolean;
  subTasks: SubTaskDetail[];
};

export type SubTaskDetail = { item: string; isCompleted: boolean };

親コンポーネント

import { useState } from "react";
import { type TaskDetail, type SubTaskDetail } from "./taskdetail";
import { SubTasks } from "./sub-lists";

export const taskListDefaultValue: TaskDetail[] = /* 省略 */;

const Parent = () => {
  const [tasks, setTasks] = useState<TaskDetail[]>(taskListDefaultValue);
  const [index, setIndex] = useState<number>(0);

  const handleAddSubListItem = (itemDetail: SubTaskDetail) => {
    return setTasks(
      tasks.map((value, i) => {
        if (i !== index) return value;
        // listNum 番目の要素のみ、以下の処理で subLists に追加する
        const { subTasks } = value;
        return {
          ...value,
          subTasks: [...subTasks, itemDetail],
        };
      })
    );
  };

  return (
      <div>
        <SubTasks task={tasks[index]} onAddSubTask={handleAddSubListItem} />
      </div>
    </div>
  );
};

export default Parent;

手前味噌ですが、このような配列状のステートが絡むような UI の状態を親子コンポーネント間でどのように役割分担すべきかのアイデアを書きとめた記事があります https://qiita.com/honey32/items/2e6206c7dc1974b9bf9a

onSubmit の中の書き方の参考記事: https://qiita.com/nuko-suke/items/1393995fd53ecaeb1cbc