Search code examples
reactjssemantic-ui-react

React Semantic UI Radio check value disappearing

I have a list of questions where in each one, i have radio selections where i can select the values "Single Select" or "Multiple select"

The problem is that if i chose the same value for different questions, for example single select, the check only appears for one of theses questions

Print screen below (in this case, single select is selected for both):

enter image description here

If i have one multiple select and one single select, it works well, with the check in the correct place

Code:

                <SetUpContainer marginTop>
                  <SegmentTitle>
                    Multiple choice options
                  </SegmentTitle>
                  <Radio
                    value={question.type}
                    name="Single Select"
                    label="Single select - participants can select one option"
                    checked={question.type === 'single_select'}
                    onClick={() => handleSelectionTypeChange(indexQuestion, 'single_select')}
                  />
                  <Radio
                    value={question.type}
                    name="Multiple Select"
                    label="Multiple select - participants can select one or more options"
                    checked={question.type === 'multiple_select'}
                    onClick={() => handleSelectionTypeChange(indexQuestion, 'multiple_select')}
                  />
                </SetUpContainer>

Does anyone knows why it's happening?

Solution

  • In this case, you have a list of questions, so that you also need to specified each Radio a unique name or anything else to discriminate those radio buttons, otherwise, only the last match would be checked.

    I have some ideas to handle this. I haven't tested yet, just draft the idea.

    Solution 1:

    {questions?.map(question => (
  /* ... */

  <SetUpContainer marginTop>
    <SegmentTitle>
      Multiple choice options
    </SegmentTitle>
    <Radio
      value={question.type}
      name={`Single Select-Q${question.no}`}
      label="Single select - participants can select one option"
      checked={question.type === 'single_select'}
      onClick={() => handleSelectionTypeChange(indexQuestion, 'single_select')}
    />
    <Radio
      value={question.type}
      name={`Multiple Select-Q${question.no}`}
      label="Multiple select - participants can select one or more options"
      checked={question.type === 'multiple_select'}
      onClick={() => handleSelectionTypeChange(indexQuestion, 'multiple_select')}
    />
  </SetUpContainer>

  /* ... */

}

    Solution 2:

    const [listOptions, setListOptions] = useState({
  // 'Q1': 'single_select',      // just an example
  // 'Q2': 'multiple_select',    // just an example
})

return (
  {questions?.map(question => (
    /* ... */

    <SetUpContainer marginTop>
      <SegmentTitle>
        Multiple choice options
      </SegmentTitle>
      <Radio
        value={question.type}
        name="Single Select"
        label="Single select - participants can select one option"
        checked={listOptions[question.no] === 'single_select'}
        onClick={() => handleSelectionTypeChange(indexQuestion, 'single_select')}
      />
      <Radio
        value={question.type}
        name="Multiple Select"
        label="Multiple select - participants can select one or more options"
        checked={listOptions[question.no] === 'multiple_select'}
        onClick={() => handleSelectionTypeChange(indexQuestion, 'multiple_select')}
      />
    </SetUpContainer>

    /* ... */

  }
)