Radio does not render selected

[wnvko]

Description

I am trying to bind radios in ratio group to a variable.

Steps to reproduce

Use code like this:

const [radio, setRadio] = useState<string | undefined>();
...
<IgrRadioGroup>
  <IgrRadio name="radio" change={(s, e) => e.detail ? setRadio(s.value) : undefined } value="1" key={uuid()}>
    <span key={uuid()}>First</span>
  </IgrRadio>
  <IgrRadio name="radio" change={(s, e) => e.detail ? setRadio(s.value) : undefined } value="2" key={uuid()}>
    <span key={uuid()}>Second</span>
  </IgrRadio>
  <IgrRadio name="radio" change={(s, e) => e.detail ? setRadio(s.value) : undefined } value="3" key={uuid()}>
    <span key={uuid()}>Third</span>
  </IgrRadio>
</IgrRadioGroup>
<p>Radio is {radio}</p>

Result

Clicking on any of the radios updates the variable, but the radio button remains unselected. On second click the radio button is selected. Here is how it is looks like after first click:

Expected result

Radio button should be selected on click.

[mddragnev]

@wnvko So there is a problem within the sample. The key thing here is that when u are setting state with the setRadio(s.value) you are causing the component to rerender. When the component is rerendering and the key is set to the uuid() which generates a new id, thus resulting in a entirely new component for React. Those keys should not change on every rerender. Here is an example with keys that do not change on every rerender which works just fine:

<IgrRadioGroup>
        <IgrRadio
          name="radio"
          change={onChange}
          value="1"
          key="key1"
        >
          <span key="key2">First</span>
        </IgrRadio>
        <IgrRadio
          name="radio"
          change={onChange}
          value="2"
          key="key3"
        >
          <span key="key4">Second</span>
        </IgrRadio>
        <IgrRadio
          name="radio"
          change={onChange}
          value="3"
          key="key5"
        >
          <span key="key6">Third</span>
        </IgrRadio>
      </IgrRadioGroup>
      <p>Radio is {radio}</p>

[dkamburov]

@wnvko please re-open if you have additional questions