CODEWITHSUNDEEP
reactjsformsfieldset
Alberto Marin
Alberto Marin

Reputation: 111

Keep selected value in a set group of radio buttons in React

I have different groups of radio button within a form on this way:

<form onSubmit={handleSubmit}>
    {FormData.map(formDetails => {
      return (
        <div className='form-options' key={formDetails.id}>
          <h2 className='form-option__title'>{formDetails.title}</h2>
          <p className='form-option__description'>
            {formDetails.description}
          </p>
          <fieldset>
            {formDetails.options.map(formOptions => {

              const getScore = e => {
                setCheck(formOptions.id);
                if (typeof formOptions.value === 'string') {
                  setScore(0);
                } else {
                  setScore(e.target.value);
                }
              };

              return (
                <RadioOption
                  key={formOptions.id}
                  htmlFor={formOptions.id}
                  type='radio'
                  id={formOptions.id}
                  name={formOptions.name}
                  value={formOptions.value}
                  onChange={getScore}
                  checked={check === formOptions.id}
                />
              );
            })}
          </fieldset>
        </div>
      );
    })}
    ...
  </form>

What happens is that when I select a radio option in a different fieldset, it doesn't keep the option selected in the previous one.

Upvotes: 1

Views: 608

Answers (1)

Alberto Marin
Alberto Marin

Reputation: 111

Found the solution. The main mistake was on the name attribute, each radio button had a different name. Changed it to be the same within the group, and working. Also updated the onChange function and created different components.

Upvotes: 1

Related Questions