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>)
})}
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>)
})}