[React]onClick할 때마다 배열에 요소 추가

소개

라디오 버튼을 누르면 누른 옵션의 값을 배열에 추가하고 싶었습니다.
방법을 모르고, 기사를 찾아도 꽤 발견되지 않고 고생했기 때문에, 이쪽에 기록해 둡니다.

실현하고 싶은 일

두 개의 라디오 버튼 그룹이 있습니다.
각각 세 가지 옵션이 있으며 사용자가 클릭 한 옵션을 배열에 추가하고 싶습니다.

해결책

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를 건네주는 것으로, 요소를 판별할 수 있게 되어, 복수개 추가할 수 있게 되었다.