InputFormの細分化

Question

reactでform の作成をしているのですが、
formをどれくらい細分化するべきなのかわからずモヤモヤしております。

例えば）
form に名前と年齢(type="text")を入れて送信(type="submit")をしたい場合
・form というので一箇所にまとめる
・名前、年齢、送信ボタンを一つずつcomponentしてそれを呼び出すcontainerを作る

どちらなのでしょうか、ご教授よろしくお願いします。

Answer 1

個人的にはformに一箇所にまとめる方向で良いかなと思います。

根拠はReact公式ドキュメントでもそのような使われ方をされてるためです。
React document: https://reactjs.org/docs/forms.html
CodePenの例: https://codepen.io/gaearon/pen/VmmPgp?editors=0010

以下、nameとageがinputで、送信をする場合のサンプルコードです。
https://codepen.io/engineer_jp_us/pen/XOgpgb