material-ui radiobutton for true/false table

0
votes

Trying to implement a simple true/false table with material-ui radiobuttons. When it didn't accept boolean values for 'value', I simplified to just strings as follows:

<RadioButtonGroup name="user_status" defaultSelected="hello" onChange={updateNewInactive}>
 <RadioButton
  value="hello"
  label="Active"
 />
 <RadioButton
  value="goodbye"
  label="Inactive"
 />
</RadioButtonGroup>

The errors returned are: enter image description here

I'm confused that I'm getting an error when 'defaultSelected' is a correct prop for RadioButtonGroup. Following the stack traces only leads to error functions in react eg. console.log(error) not to any errors in the source code. Can anyone clarify what might be going on?

2
reactjsmaterial-ui

2 Answers

0
votes

Your code looks OK - can you paste the entire snippet? It appears you might have an input tag somewhere that you accidentally put those properties on?

0
votes

You have to pass valueSelected prop to RadioButtonGroup to get selected value. Take a look into below code

 <RadioButtonGroup valueSelected={this.state.cranRadio} onChange={this.handleCRAN} style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between'}} name="coin" defaultSelected="not_light">   
                                                            <RadioButton
                                                          value="Yes"
                                                                  label="Yes"
                                                                  inputStyle={styles.inputStyle}
                                                                  style={{ width: 'auto'}}
                                                          labelStyle={{marginLeft:'-10px'}}
                                                                />
                                                                <RadioButton
                                                              value="No"
                                                                  label="No"
                                                                style={{ width: 'auto' }}
                                                                  inputStyle={styles.inputStyle}
                                                          labelStyle={{marginLeft:'-10px'}}
                                                                /> 
                                                        </RadioButtonGroup>