Checkbox property DefaultChecked in reactjs not working with states updated by radio button

Question

On the bases of the value of radio button(html mention below) I want to mark checkbox as checked or unchecked. Below is my code which is not working.

Thank you for your suggestions.

Radio button

    <Input
      type="radio"
      name="radio1"
      value="No"
      defaultChecked
      onChange={ (e) => {
                         this.setState({
                                        auto_registration: e.target.value
                                       })
                        } } />
    <Input
      type="radio"
      name="radio1"
      value="Yes"
      onChange={ (e) => {
                         this.setState({
                                        auto_registration: e.target.value
                                       })
                        } } />

Checkbox

<Input
      type="checkbox"
      defaultChecked={ this.state.auto_registration && this.state.auto_registration == "Yes" ? true : false }
      disabled={ this.state.auto_registration && this.state.auto_registration == "Yes" ? true : false } />

Shubham Khatri · Accepted Answer · 2020-06-06 19:41:23Z

3

defaultChecked property is only used on initial render. If you want to have a controlled checked input, se the checked property instead

<Input
      type="checkbox"
      checked={ this.state.auto_registration && this.state.auto_registration == "Yes" ? true : false }
      disabled={ this.state.auto_registration && this.state.auto_registration == "Yes" ? true : false } />

answered Jun 6, 2020 at 19:41

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

Collectives™ on Stack Overflow

Checkbox property DefaultChecked in reactjs not working with states updated by radio button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related