如何更改 - 单选按钮 antd

Question

i have question arr and foreche question i want to render the question and antd radio button answers.

the problem is when i change any question, all the answer changed as well to the same answer that i change in the first question. there is any way to do key or id to the radio button and on change by that key, or any help?? this is my code:

 import { Radio } from "antd";
 const { questions} = props;
 const [value, setValue] = useState(1);

 const onChange = e => {
        setValue(e.target.value);
};

{questions.map((question, i) => {                     
            return (<div><div>{question.Description}</div>
            <Radio.Group value={value} onChange={onChange} >
                 <Radio value={1}>Aי</Radio>
                 <Radio value={2}>B</Radio>
                 <Radio value={3}>C</Radio>
            </Radio.Group></div>) 
 })}

Answer 1

You must create a state of array or create a child component for radio buttons to has own state:

import { Radio } from "antd";
const { questions} = props;
const [value, setValue] = useState([]);

const onChange = (e, i) => {
    setValue(prevState => {
        const newState = [...prevState]; 
        newState[i] = e.target.value;
        return newState;
    });
};

{questions.map((question, i) => {                     
    return (<div><div>{question.Description}</div>
        <Radio.Group value={value[i]} onChange={e => onChange(e,i)} >
             <Radio value={1}>Aי</Radio>
             <Radio value={2}>B</Radio>
             <Radio value={3}>C</Radio>
        </Radio.Group></div>) 
})}