I have this project built with react and bootstrap. I wanted to change to material-ui and it worked well until changing the radio button.

Here is the old one i used (worked pretty well).

<label>
    <input type= {that.props.questionType} name={that.props.questionID} value={choice}/>
    {choice}
</label>

Here is the material-ui version.

<RadioButtonGroup >
    <RadioButton
        value={that.props.questionID}
        label={choice}
    />
</RadioButtonGroup>

Here is the map function I use to generate the radio buttons:

var iterator = (
  <RadioButtonGroup selectedValue={that.props.questionID}>
    {that.props.questionChoices.map(choice => <RadioButton value={choice} label={choice} /> )}
  </RadioButtonGroup>
);

I have this project built with react and bootstrap. I wanted to change to material-ui and it worked well until changing the radio button.

Here is the old one i used (worked pretty well).

<label>
    <input type= {that.props.questionType} name={that.props.questionID} value={choice}/>
    {choice}
</label>

Here is the material-ui version.

<RadioButtonGroup >
    <RadioButton
        value={that.props.questionID}
        label={choice}
    />
</RadioButtonGroup>

Here is the map function I use to generate the radio buttons:

var iterator = (
  <RadioButtonGroup selectedValue={that.props.questionID}>
    {that.props.questionChoices.map(choice => <RadioButton value={choice} label={choice} /> )}
  </RadioButtonGroup>
);

• javascript
• reactjs
• user-interface
• material-ui

• the old one generates 2 or 3 , because i used JSON files and used map function to display them , the one does too , but it selectes all of them at ounce – Nizar Jailane Commented Jan 20, 2018 at 20:48
• Can you show us the map function you're using? – Jules Dupont Commented Jan 20, 2018 at 22:39
• 1 Does it generates list of radio buttons? or is that only one? – Hemadri Dasari Commented Jan 21, 2018 at 3:01
• it generates a list of radio buttons,, sense i use map function – Nizar Jailane Commented Jan 21, 2018 at 15:38
• 1 var iterator = ( <RadioButtonGroup selectedValue={that.props.questionID} > {that.props.questionChoices.map(choice => <RadioButton value={choice} label={choice} /> )} </RadioButtonGroup> ); – Nizar Jailane Commented Jan 21, 2018 at 15:39

1 Answer 1

When creating a RadioButtonGroup, you MUST assign name property (please refer the material-ui documentation).

Also when using a map function you should add a key property to each of the returned elements.

Following snippet has those issues addressed:

var iterator = ( 
  <RadioButtonGroup 
    name="questionChoices"
    valueSelected={that.props.questionID}
    onChange={that.props.handleChange}
  > 
    {that.props.questionChoices.map(choice => (
       <RadioButton value={choice} label={choice} key={choice}/> 
    )} 
  </RadioButtonGroup> 
)