Radio state not changing when component retrieved from state

[chipit24]

Here is the code for the sample app:

class App extends Component {
  constructor() {
    super();
    
    this.state = {
      selectedOption: 'one'
    };
  }
  
  componentDidMount() {
    this.setState({
      radioContent: <RadioGroup
        className="payment-options"
        onChange={event => this.setState({selectedOption: event.currentTarget.value})}
        name="selectedOption"
        value={this.state.selectedOption}>
        <Radio ripple value="one">One</Radio>
        <Radio ripple value="two">Two</Radio>
        <Radio ripple value="three">Three</Radio>
        <Radio ripple value="four">Four</Radio>
      </RadioGroup>
    });
  }
  
  render() {
    return (
      <div className="App">
        {this.state.radioContent}
        <h1>{this.state.selectedOption}</h1>
      </div>
    );
  }
}

I have the test app up on GitHub as well: https://github.com/chipit24/react-mdl-radio-group-test

If you run the app, what you will notice is that the selectedOption in state is correctly updated, but the radio button state does not change; the first radio button ("one") will remain selected.

This appears to be caused by the fact that I'm storing the RadioGroup JSX inside of the state (however, the issue is the same if I store it as an instance variable).

I need to be able to dynamically generate and pass the RadioGroup component to other props in an app which I'm working on. How can I get around this issue?

Running into the exact same, issue, did you find a solution?

Isn't that the same project?

[chipit24]

Whoops, I thought I was replying to another issue - I removed my comment. I never resolved the issue. I ended up building a different component and not using radio buttons.

[charlesr1971]

I found the same problem was happening, so I decided to use the onClick handler, as an attribute of each Radio element, rather than the onChange handler, as an attribute of the RadioGroup element, and hey presto, everything worked perfectly:

const enableprofanityfilter = this.props.enableprofanityfilter;

<RadioGroup name="radio-yes-no" value={enableprofanityfilter}>
    <Radio 
            value="1" 
            ripple 
            onClick={this.props.toggleEnableprofanityfilter.bind(this,1)}
    >
        Yes
    </Radio>
    <Radio 
            value="0" 
            ripple 
            onClick={this.props.toggleEnableprofanityfilter.bind(this,0)}
    >
        No
    </Radio>
</RadioGroup>