How to checked checkbox using state in react in class based components

Question

I am working on a react project I am trying to checked checkbox using state in react, but Unable to do it After I checked checkbox using state. I need to change state using setState. For example If I have checked using state then when I click the checkbox, then it has to change its state to checked: false.

If I am not clear put a comment.

This is code

This is App.js

import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      checked: true
    }
  }


  render() {
    return (
      <div>
        <form>
          <div class="form-group form-check">
            <input  style ={{defaultChecked: this.state.checked}} type="checkbox" class="form-check-input" id="exampleCheck1" />
          </div>
        </form>
      </div>
    )
  }
}

have you tried checked attribute of <input> rather than style? — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Jan 22, 2020 at 9:05
Hi @YevgenGorbunkov If I put checked attribute it will work fine but I am trying to this with state and setState. — Cruse
– Cruse, Commented Jan 22, 2020 at 9:07

Merci Dieu KIMPOLO · Accepted Answer · 2020-01-22 09:07:35Z

2

import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      checked: true
    }
  }


  render() {
    return (
      <div>
        <form>
          <div class="form-group form-check">
            <input onClick={()=>this.setState({checked:!this.state.checked})} checked={this.state.checked} style ={{defaultChecked: this.state.checked}} type="checkbox" class="form-check-input" id="exampleCheck1" />
          </div>
        </form>
      </div>
    )
  }
}

answered Jan 22, 2020 at 9:07

Merci Dieu KIMPOLO

4433 silver badges10 bronze badges

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

1 Comment

Merci Dieu KIMPOLO Over a year ago

Hello @Cruse, did you try this?

jackstride · Accepted Answer · 2020-01-22 09:07:06Z

0

    return (
      <div>
        <form>
          <div class="form-group form-check">
            <input checked={this.state.checked} type="checkbox" class="form-check-input" id="exampleCheck1" />
          </div>
        </form>
      </div>
    )
  }

You can then add onClick() or onChange() to handle the setState.

answered Jan 22, 2020 at 9:07

jackstride

538 bronze badges

Collectives™ on Stack Overflow

How to checked checkbox using state in react in class based components

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related