Multiple values are getting selected in radio options-CodePudding

Created the multiple radio options, but it is allowing me to select more then one option.

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

What changes need to be done to select only one option ?

CodePudding user response：

If you want only one of them to be selectable. You must set the value of the name props to the same value for all of them. like this

name="radio-name"  // use filed name

like this

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