how to access state of checkboxes in ReactJS?

Question

Following the official ReactJS Docs for controlling form elements, I managed to put together the following with the exception that I'm keeping the checkboxes in a separate function:

I have a function called CheckBox() where I keep the checkboxes:

function CheckBox(props){
    return(
        <div>
            <p>Check all that apply:</p>
            <label>
                <input type="checkbox" name="a" checked={props.a} onChange={props.handleChange}/>
            </label>
            <br/>
            <label>
                <input type="checkbox" name="b" checked={props.b} onChange={props.handleChange}/>
            </label>
            <br/>
            <label>
                <input type="checkbox" name="c" checked={props.c} onChange={props.handleChange}/>
            </label>
            <hr/>
        </div>
    )
}

And class App for the state as follows:

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            fullname: '',
            a: false,
            b: false,
            c: false     
        }
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(e) {
        const target = e.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
           [name]: value,
        });
        console.log(this.state.a);
        console.log(this.state.fullname);
    }
    render(){
        return(
            <div>
                <label>
                    <p>Name</p>
                    <input name="fullname" value={this.state.fullname} onChange={this.handleChange}/>
                </label>
                <CheckBox a={this.state.a} b={this.state.b} c={this.state.c} />
                <hr/>

            </div>
        )
    }
}

I kept two console logs in handleChange() to check the states. The state for name works fine but I cant seem to get the state of any of the checkboxes to work.

---

What am I doing wrong in the above?

Answer 1

Not the answer as Jason killed it, but a way to clean up your code is to use Destructuring. I find it is a great way to keep everything a bit more readable and as you continue to use it there are some neat things you can do with it.

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            fullname: '',
            a: false,
            b: false,
            c: false     
        }
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        const {name, value, checked, type } = e.target;
        const newValue = type === 'checkbox' ? checked : value;

        this.setState({
           [name]: newValue,
        });
    }

    render(){
        return(
            <div>
                <label>
                    <p>Name</p>
                    <input name="fullname" value={this.state.fullname} onChange={this.handleChange}/>
                </label>
                <CheckBox {...this.state}/>
                <hr/>

            </div>
        )
    }
}

For those who don't want to scroll up to my comment above here is the explanation of the two places I used Destructuring to clean up this component.

1. <CheckBox {...this.state} />. This takes all of your values in state and passes them down via Destructuring.
2. You can then also take that same idea and apply it to your event and do const { name, value } = event.target That is the same as saying const name = event.target.name and const value = event.target.value
3. You could also use this in the Checkbox component so that you didn't need to say props.a function CheckBox({a, b, c, handleChange}){

Answer 2

Your handleChange function is bound to some arbitrary input field. Your actual checkboxes are entirely separate, and you have not provided your App object access to the values in the Checkbox object.

You must pass the handleChange function to your Checkbox object with

<CheckBox 
    a={this.state.a} 
    b={this.state.b} 
    c={this.state.c} 
    handleChange={this.handleChange}
/>