#概要
こんにちは！今日はフォームの回答欄の数を可変にする方法をお伝えします。
具体的にいうと「回答を追加するボタン」を押すと回答欄が増えて、「回答を削除するボタン」を押すと回答欄が減るフォームです！
useStateなどreactの基本的な内容が分かっている人は、簡単に実装できると思います〜
#手順
##1.numOfFormを定義する。
（例）
const [numOfForm, setNumOfForm] = useState(1);
このようにuseStateを用いて初期値が１のstateを作成します。
これが最初の回答欄の数になります。
##2.inputsを定義する。
（例）
const inputs = Array(numOfForm).fill(null);
ここに入力されたデータを入れていくことになります。
すなわち最終的にユーザに入力してもらったデータはinputsに入ります！
##3.HTML(JSX)の記述
（例）
return(
...
{Array(numOfForm)
.fill(null)
.map((_, i) => (
<input
key={i}
value={inputs[i]}
required={true}
onChange={(e) => inputs.splice(i, 1, e.target.value)}
/>
))}
...
)
上記のようにして、map関数やfill関数を用いて、記述していきます。
まずnumOfFormの数だけnullが入っている配列を作成します。それにmapを適用してinputをnumOfFormの数だけ作っていきます。
##4.addAnswer,deleteAnswerを定義
（例）
const addAnswer = () => {
setNumOfForm(numOfForm + 1);
};
const deleteAnswer = () => {
if (numOfForm === 1) {
console.log("これ以上回答は削除できません");
} else {
setNumOfForm(numOfForm - 1);
}
};
このようにしてaddAnsewerではnumOfFormの数を増やし、deleteAnswerではnumOfFormの数を減らします。delteAnswerでは、numOfFormの数が0以下にならないようにif文を記述しています。
##5.フォームを増やすボタンの作成
（例）
return(
...
<Button onClick={addAnswer}>回答を追加</Button>
<Button onClick={deleteAnswer}>回答を削除</Button>
...
)
これによりaddAnswerとdeleteAnswer関数が呼び出されるようになります。またnumOfFormはstateで管理しているため、numOfFormの値がsetされるたびに、JSXの再描画が行われます。これによりボタンを押すたびに、ページの見た目がしっかりと変わってくれます。
#余談
今回はフォームの回答欄が可変になるようにしました！
やや、mapやfillを使っているところが複雑ですが、ゆっくり読んでみてください！
自分は複数回答のクイズのフォームに使用しました。