RadioGroup: Setting RadioButton (input) ID based on button value opens the possibility to add multiple duplicate element IDs in dom tree

[petersf7]

Describe the bug
The RadioButton component sets its dom tree ID based on the value outputted if selected. This is okey as long as there is just one single RadioGroup in the dom tree, but if you add multiple RadioGroups, chances are that some of the RadioButtons within those groups will have the same value and thus same ID. This is an issue and creates mysterious bugs since when you select an option, where the RadioButton component has set the ID of the underlying as the same as another in the dom tree, both the values will be updated and thus create an unwanted behaviour

To Reproduce
Steps to reproduce the behavior:

1. Create two RadioGroups
2. Add 2 RadioButtons to both
3. Let both RadioGroups have the options "yes" and "no"
4. Try to chose "yes" for the first RadioGroup, and then "no" for the second one

You will then see both of them getting updated.

Expected behavior
When I have two separate RadioGroups, but with some of the same option values of the RadioButtons inside, both the RadioGroups will update independently of the other RadioGroup.

To Fix
Add an ID value as props to the RadioGroup and let the RadioButtons inside the radio group be based on its own value and the ID of the RadioGroup that "owns" it.

Desktop (please complete the following information):

• Chrome 7.0.4280.141
• MacOs Mojave