動的に追加したコンポーネント内で入力した値を、すべて親側で受け取りたい

Question

前提・実現したいこと

少々複雑になってしまいましたが、タイトル通りのことを実装したいです。

元のプログラムはごちゃごちゃしているため、該当する部分の最小限のコードを載せています。

現在は、親コンポーネント内でuseStateを使い、子コンポーネントにstateを付与することで値を管理しようとしていましたが、動的に追加されたコンポーネントにstateを振ることが困難だと感じ、相談するに至りました。

最終的には、logをクリックした際に、以下のようにそれぞれのコンポーネントで入力した値を１つのリストにまとめたものが出力されれば満足です。（リストの要素は動的に増える）

質問等ありましたら随時補足していきますので、どなたか回答よろしくお願いします。

[追記]
やりたいこととしては
・子コンポーネントでinputタグを作成
・親側では動的にの子コンポーネントを増やすことができる
・親側で子コンポーネントで入力された値を取得できる

言ってしまえば、子から親への値の受け渡しに近いのかもしれません。

List = [
  {
    param1: "aaaa",
    param2: "bbbb",
  },
  {
    param1: "cccc",
    param2: "dddd",
  },
  {
    param1: "eeee",
    param2: "ffff",
  },
]

該当のソースコード

Parent.jsx

export const Parent = () => {
  const [list, setList] = useState([]);

  const onClick = () => {
    const newList = [
      ...list,
      {
        param1: "", // この値を子コンポーネントで埋めたい
        param2: "", // この値を子コンポーネントで埋めたい
      },
    ];
    setList(newList);
  };

  const onClickLog = () => {
    console.log(list)
  }

  return (
    <>
      {list.map((item, idx) => {
        // この辺をどう変更すべきかがわからない
        return <Children key={idx} item={item} />; 
      })}
      <button onClick={onClick}>追加</button>
      <button onClick={onClickLog}>log</button>
    </>
  );
};

Children.jsx

// このpropsにparam1, param2をセットしたい
export const Children = (props) => {
  const [param1, setParam1] = useState("");
  const [param2, setParam2] = useState("");

  const onChange1 = (e) => {
    setParam1(e.target.value);
  };
  const onChange2 = (e) => {
    setParam2(e.target.value);
  };

  return (
    <>
      <input value={param1} onChange={onChange1} />
      <input value={param2} onChange={onChange2} />
    </>
  );
};

Answer 1

とりあえずこんな感じでいかがでしょうか。
(なお、ひとつの子コンポーネントはひとつの item を表示するので、単数形 Child の方がいいと思います。)

 export const Parent = () => {
   const [list, setList] = useState([]);
 
   // 略
 
+  const setItem = (idx, item) => {
+    const newList = [...list];
+    newList[idx] = item;
+    setList(newList);
+  };
+
   return (
     <>
       {list.map((item, idx) => {
         // この辺をどう変更すべきかがわからない
-        return <Children key={idx} item={item} />; 
+        return <Child key={idx} item={item} setItem={(item) => setItem(idx, item)} />;
       })}
       <button onClick={onClick}>追加</button>
       <button onClick={onClickLog}>log</button>
     </>
   );
 };

-export const Children = (props) => {
-  const [param1, setParam1] = useState("");
-  const [param2, setParam2] = useState("");
+export const Child = ({ item, setItem }) => {
 
   const onChange1 = (e) => {
-    setParam1(e.target.value);
+    setItem({ ...item, param1: e.target.value });
   };
   const onChange2 = (e) => {
-    setParam2(e.target.value);
+    setItem({ ...item, param2: e.target.value });
   };
 
   return (
     <>
-      <input value={param1} onChange={onChange1} />
-      <input value={param2} onChange={onChange2} />
+      <input value={item.param1} onChange={onChange1} />
+      <input value={item.param2} onChange={onChange2} />
     </>
   );
 };

Comments

[tksx1227]

回答ありがとうございます！
こちらのコードを参考にしてみたところ、期待していた挙動をしてくれました！

特に以下のように、propsに渡す関数に引数を設定する記述方法のことをすっかり忘れており、大変参考になりました。
<Child key={idx} item={item} setItem={(item) => setItem(idx, item)} />

追加で少しお聞きしたいのですが、上記のプログラムに、動的に要素を削除する機能を付与した場合、keyはidxを使ったままで大丈夫なのでしょうか。

例えば、追加や削除を繰り返すことで、keyが３のコンポーネントがコロコロ変わる（keyが一意の要素を指さない）と思うのですが、入力情報が本来の値とズレるといったことは起こり得ますかね。

[hoshi-takanori]

確かに、key={idx} だとずれますね。ただ、param1 や param2 の値も書き換わるので、結果的にはうまく動いてるように見えると思いますが、できれば uuid などを使って一意かつ不変な id を設定するのが好ましいと思います。
また、Child に渡す setItem 関数は毎回すべて作り直されて更新範囲が大きくなるので、うまくメモ化した方が良いかもしれません…。

[tksx1227]

なるほど、uuidというものがあるのですね。
是非取り入れてみます。

メモ化についても、後々最適化する際に考慮したいと思います。

追加対応まで本当にありがとうございました！