Multiple values are getting selected in radio options

Question

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 ?

Answer 1

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