【React】フォームの回答欄の数を可変にする

概要

こんにちは！今日はフォームの回答欄の数を可変にする方法をお伝えします。
具体的にいうと「回答を追加するボタン」を押すと回答欄が増えて、「回答を削除するボタン」を押すと回答欄が減るフォームです！
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を使っているところが複雑ですが、ゆっくり読んでみてください！
自分は複数回答のクイズのフォームに使用しました。