Reactで子コンポーネントが可変になる場合

Question

フォームの項目数が可変になるシステムを扱うことになりました。
Reactで実装しようとしています。

親コンポーネントでフォームそのもの、子コンポーネントでフォームの各パーツ（テキストボックス、プルダウンなど）というコンポーネント構成にしようとしています。(関数コンポーネントで考えています。)

そこで、親にhooksのstateを持たせて子コンポーネントの状態を管理しようと考えているのですが、子の数が可変になる場合にhooksのstateの数って可変にできるのでしょうか？

Reactの場合だと子から親へ状態を渡す場合は、親コンポーネント側でhooksのstateを定義しなければならないということでしたのでそもそも可変にすることが難しいのかなと思っています。

hooksのstateに限らずReactで可変の状態を管理する方法などご存知の方がいらっしゃったらご教授お願いできればと思います。

Comments

[hoshi-takanori]

親コンポーネントが配列的なものを持てば良いと思います。
(ちなみに、「親にhooksを持たせて」という表現は引っかかります。「hooks を使って状態 (state) を持たせる」かと…。)

[jacknifesoulde]

ご指摘ありがとうございます。
確かにそうですね。想定しているのはhooksのstateでの状態管理でした。修正しておきます。

Answer 1

そこはuseReducerの出番なのかもですよ

項目の種類を柔軟に増やせるだけでなく
別の入力項目に影響を与えたりすることもしやすくなり
一つの入力コンポーネントで複数の値を取り扱うのも簡単になります

Comments

[jacknifesoulde]

なるほどですね。それは初めて知りました。
調査してみます。

Answer 2

stateを配列にすれば、配列の要素数は可変にできます。

Comments

[jacknifesoulde]

ありがとうございます。
確かにそうですね。その方向でうまくやれそうか検討してみます。