React radio buttons

Question

I'm trying to create a yes-no radio buttons with react but using only one state. Thus, I have something like this :

<label className="radio-inline">
        <input
             type="radio"
             name={this.props.nameYes}
             defaultChecked={this.props.state}
             onChange={this.props.onChangeEmailNotifications}
             value="yes"/>Yes
</label>
<label className="radio-inline">
         <input
             type="radio"
             name={this.props.nameNo}
             defaultChecked={!this.props.state}
             onChange={this.props.onChangeEmailNotifications}
             value="no"/>No
 </label>

The state I pass with a parent component is set to true.

This onChange function is :

changeCheckboxState: function(event){
    var chcName = event.target.name;

    switch(chcName){
        case "chcEmailNotificationsYes":
            this.state.user.emailNotifications = event.target.checked;
            this.setState({user: this.state.user});
            console.log('checkbox ' + chcName + " state je : ", this.state.user.emailNotifications);
            break;
        case "chcEmailNotificationsNo":
            this.state.user.emailNotifications = !event.target.checked;
            this.setState({user: this.state.user});
            console.log('checkbox ' + chcName + " state je : ", this.state.user.emailNotifications);
            break;
        default:
            console.log("Sad smo u default");
    }
}

But those radio buttons aren't working. In console log I see that the state is changed, but it doesn't have effect on the radio buttons.

And is there any way to set the state to null at the beginning, that buttons aren't checked?

Damien Leroux · Accepted Answer · 2016-05-10 09:32:52Z

1

use checked instead of defaultChecked as input radio props

answered May 10, 2016 at 9:32

Damien Leroux

11.8k7 gold badges46 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Boky Over a year ago

Yes that did the trick. And how can I solve the problem if I set the state to null. If I set it now to null my NO button is checked.

Damien Leroux Over a year ago

do checked={this.props.state?this.props.state:undefined} and checked={this.props.state?!this.props.state:undefined}.

Boky Over a year ago

Yes. Great. Thanks mate.

Stefano · Accepted Answer · 2016-05-10 09:55:35Z

0

I believe that your radio buttons are not being checked as React is expecting a click event (see https://facebook.github.io/react/docs/forms.html#potential-issues-with-checkboxes-and-radio-buttons), according to that link you'll need to remove the call to preventDefault. Your syntax also appears incorrect to me -

This is a prop not state (If this is correct I'd suggest using a different property name) defaultChecked={this.props.state}

It should look something like this defaultChecked={this.state.xxxx}

With regards to the setting of state, you can use getInitialState to set the state to null, this can then be updated onChange or using a click method.

Your use of defaultChecked appears correct.

answered May 10, 2016 at 9:55

Stefano

6251 gold badge5 silver badges11 bronze badges

1 Comment

Boky Over a year ago

I changed defaultChecked to checked and that did the trick. It is in the state, and syntax and everything works fine. I just didn't want to create a big post. And how can I solve the problem if I set the state to null. If I set it now to null my NO button is checked.

Collectives™ on Stack Overflow

React radio buttons

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related