Checkbox Issues in ReactJS

Question

I'm really stumped on what's happening in this code. I'm trying to have a checkbox in ReactJS. The box doesn't check/uncheck onClick, however it does save your selection as true/false.

Help would be strongly appreciated and I can elaborate if necessary.

Screenshot - the checkbox never is checked, even when you click it and the value has changed from false to true

export default class checkboxEdit extends Component { //sample change
    constructor(props){
        super(props);
        this.onChangeHandler = this.onChangeHandler.bind(this);
        this.onBlur = this.onBlur.bind(this);
    }
   onChangeHandler(event){
        event.preventDefault()
        this.props.onChange({
            target:{
                value: event.target.checked
            }
        });
        if (this.props.onClick && Object.prototype.toString.call(this.props.onClick) == '[object Function]') {
          try {
               this.props.onClick(event);
           } catch (err) {
               console.log('Suppressing error', err);
           }
       }
    }
    
   onBlur(event) {
		 if (this.props.onBlur && Object.prototype.toString.call(this.props.onBlur) == '[object Function]') {
                    this.props.onBlur(event);
         }
		 
		 if (this.props.onBlurChange && Object.prototype.toString.call(this.props.onBlurChange ) == '[object Function]') {
                    this.props.onBlurChange (event);
                }
	}
    
    render() {
        return (
            <p className='form-control-static'>
                <span className='checkbox'>
                    <label style={{minWidth:'50px'}} className='checkbox'>
                       <input style={{minWidth:'50px'}} type='checkbox' 
                        onMouseEnter={this.props.onMouseOver} 
                        onMouseLeave={this.props.onMouseOut} 
                        onChange={this.onChangeHandler}
                        onBlur={this.onBlur}
                        onFocus={this.props.onFocus}
                        aria-required={(this.props.required) ? true : false} 
                        value="on" 
                        checked={(this.props.value) ? "checked" : ""}
                        className='form-check-input' 
                        />
                        <span>{this.props.checkboxText}</span>
                    </label>
                    <small className='form-text text-muted'>{this.props.descriptiveText}</small>
                </span>
            </p>
        );
    }
}

Christopher Chiche · Accepted Answer · 2017-08-07 16:20:08Z

1

As showed in the documentation, the checked attribute should be a boolean instead of a string. So you could try:

checked={this.props.value}

Also I'm not sure whether the presence of the value attribute is leading to your issue or not. You could try removing it.

EDIT

Calling event.preventDefault in your handler apparently broke the react update from working correctly. See https://stackblitz.com/edit/react-t2he58?embed=1&file=CheckBoxEdit.js for a working solution.

edited Aug 7, 2017 at 16:20

answered Aug 7, 2017 at 15:45

Christopher Chiche

15.4k10 gold badges65 silver badges100 bronze badges

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

3 Comments

Christopher Chiche Over a year ago

I edited my answer right after posting it with this edit. Does it work now?

Salki Over a year ago

I replaced the previous checked line with your suggestion. I also tried to remove value attribute but that didn't affect it either way. Now on the first click on the checkbox, the value of 'True' is saved. The second click causes the box to appear as checked. I thought I had these both happening at the same time, but it appears they're separated somehow--do you have any further suggestions? Thank you!

Salki Over a year ago

That worked---thank you so much, I would have never thought that would be the problem. ^^

Collectives™ on Stack Overflow

Checkbox Issues in ReactJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related