[React]onClickするたびに配列に要素を追加する

はじめに

ラジオボタンを押すと、押した選択肢のvalueが配列に追加するようにしたかった。
方法がわからず、記事を探しても中々見つからず苦労したので、こちらに記録しておきます。

実現したい事

２つのラジオボタングループがある。 それぞれ３つずつ選択肢があり、ユーザーがクリックした選択肢を配列に追加したい。

解決策

const initialValue = Array(selections.length).fill('0');
const [formData, setFormData] = useState<string[]>(initialValue);

	const updateSelections = (index: number, value: string) => {
		const newFormData = formData.slice();
		newFormData[index] = value;
		setFormData(newFormData);
	};

///...
return (
		<div>
			<FormLabel>{data.formLabel}</FormLabel>
			<RadioGroup onChange={(e) => updateSelections(index, e.target.value)}>
				{data.options.map((option) => (
					<FormControlLabel
						key={option.value}
						control={<Radio />}
						label={option.label}
						value={option.value}
						id={option.value}
					/>
				))}
			</RadioGroup>
		</div>
	);

①formDataを用意
②formDataの初期値を0にする(initialValue)
③onChangeにupdateSelectionsを実行し、index,選択肢のvalueを渡す
　updateSelectionsでは、
　(1)newFormDataによってformDataのコピーを作る。（本物を破壊したくないため）
　(2)newFormData[index]によって、配列・newFormDataのindexの位置にvlue(選択肢の値)を挿入する。
(3)(2)の値をsetFormDataに入れる
④formDataにonClickごとに選択肢の値が追加されるようになる

　
indexを渡すことで、要素を判別できるようになり、複数個追加できるようになった。