Created the dynamic radio, but it is affect others-CodePudding

I have created the dynamic radio list , and it is displaying correct data based on item.

   {item.responseType === "radio" && (
                          <div className="form-control-wrap">
                            {item.options
                              .split(",")
                              .map((list, indexRadio) => (
                                <Form.Check
                                  key={indexRadio}
                                  id={item.id}
                                  label={list}
                                  name="radio"
                                  value={list}
                                  onChange={(e, indexRadio) =>
                                    handleChange(e, indexQuestion)
                                  }
                                  type="radio"
                                />
                              ))}
                          </div>
                        )}

But When I am selecting ant one option it is affecting others,

Like if I select Question No 1 ,it is working fine ie : it is selecting only one option, but when move to Question number 2 and select any option it is selecting data from question 2 but, question one options will set to initial state.(it is getting reset)

Let me know what should I do ?

CodePudding user response：

you are using name="radio" that is same for all so it is treating all the radio buttons from same group. use same name for all options of same question. it will solve your issue. you can use question id for radio button name so that it will be same for all options of that question and different from other question.

CodePudding user response：

I think using this variation will get you to your goal : Change the Key in <Form.Check/>

<Form.Check
   key={item.id}
 />