I am working with react js and found a weird issue on radio button onChange event binding. My page opens a popup on button click where a new ponent bind inside that popup. In this new ponent I have created 2 radio buttons and on change of that radio buttons I'm hide/show div. below is my code.

 class ponent1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showComponent: true
   };
  }
  handleChange = () => {
    this.setState({
      showComponent: !this.state.showComponent,
    });
  }
  render() {
   return(
   <div>
    <input type='radio' name='a' onChange={self.handleChange} defaultChecked/>
    <input type='radio' name='a' onChange={self.handleChange}/>
     {this.state.showComponent && (<div>Hide or show based on state change</div>)}
   </div>
  );
 }
}

When I open the popup for the first time it works fine. Perhaps its behavior change after submitting form and popup close. When next time I open popup without parent page refresh, on first change of radio button it does not call handleChange function. And from the second click it just works fine.

I think, onSubmit I have called form.reset() function on successful submission of form, which is creating problem. But i don't understand how to resolve this issue.

I am working with react js and found a weird issue on radio button onChange event binding. My page opens a popup on button click where a new ponent bind inside that popup. In this new ponent I have created 2 radio buttons and on change of that radio buttons I'm hide/show div. below is my code.

 class ponent1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showComponent: true
   };
  }
  handleChange = () => {
    this.setState({
      showComponent: !this.state.showComponent,
    });
  }
  render() {
   return(
   <div>
    <input type='radio' name='a' onChange={self.handleChange} defaultChecked/>
    <input type='radio' name='a' onChange={self.handleChange}/>
     {this.state.showComponent && (<div>Hide or show based on state change</div>)}
   </div>
  );
 }
}

When I open the popup for the first time it works fine. Perhaps its behavior change after submitting form and popup close. When next time I open popup without parent page refresh, on first change of radio button it does not call handleChange function. And from the second click it just works fine.

I think, onSubmit I have called form.reset() function on successful submission of form, which is creating problem. But i don't understand how to resolve this issue.

• javascript
• reactjs
• radio-button

• It's hard to say what might be wrong from the code currently in your question. It would be helpful if you could create a Minimal, Complete, and Verifiable example in e.g. CodeSandbox. – Tholle Commented Nov 2, 2018 at 16:21
• Perhaps it makes sense to make handleChange accept an argument, and do the toggling depending on that argument? Can't the value of radio buttons be 'indefinite' after you call 'form.reset()` I wonder? – raina77ow Commented Nov 2, 2018 at 16:23
• probably the edit but self.handleChange and not this.handleChange which is arrow bound? you've not declared self = this – Dimitar Christoff Commented Nov 2, 2018 at 16:24
• On handlechange (in sestate block) use the prevstate to get value of showp. – benchpresser Commented Nov 2, 2018 at 17:18

1 Answer 1

<input type='radio' name='a' onChange={this.handleChange} checked={!this.state.showComponent} />
<input type='radio' name='a' onChange={this.handleChange} checked={this.state.showComponent}/>

this will work find in a controlled way as opposed to reliance on event and defaultChecked

https://codesandbox.io/s/5z40rj836l