vendredi 26 octobre 2018

React Checkbox state gives opposite value

Here is my Checkbox component, at this point I'm trying to check if the returned state is correct, that when it's checked, it returns 'true' and the other way around.

For now, when I check it, it returns 'false'. When I uncheck, it says 'true'.

I don't quite understand what I'm doing wrong here, the code seems to make sense to me like this. Is it just my console.log that is throwing me off?

export default class Checkbox extends PureComponent {
  constructor() {
    super();
    this.state = {
      checked: false
    };
  }

  handleCheckClick = () => {
    this.setState(prevState => ({
      checked: !prevState.checked
    }));
    console.log(this.state);
  };

  render() {
    const { answer, value } = this.props;
    return (
      <div className="form">
        <div className="form__answer">
          <FormGroup check>
            <Label check>
              <Input
                type="checkbox"
                name="check"
                checked={this.state.checked}
                onChange={this.handleCheckClick}
                value={value}
              />
              {answer}
              <span className="checkmark" />
            </Label>
          </FormGroup>
        </div>
      </div>
    );
  }
}




Aucun commentaire:

Enregistrer un commentaire