How do I bind a checkbox in a REACT Form?

Question

I have a form with an input and checkbox elements. I am trying to bind the checkbox but it isn't working. I am new to REACT and may be doing this an old way so please help me solve this before convincing me to try the new way. You can share with me both. That would be most beneficial to my learning.

Here's an except

handleMeetCheckBox(event){
 console.log(event.target.type)
 if (event.target.type === "checkbox"){      
   this.setState({[this.state.meet]:event.target.checked}) 
 } 
}
.
. 
.
render(){
return(
<div>
    <input 
      type="checkbox" 
      name="meet" 
      checked={this.state.meet} 
      onChange={this.handleMeetCheckBox} 
    />
    Want to meet?<br />
    <input type="checkbox" name="secret" />Secret?
    <p>If 'Secret' then....</p><br />
    Subject:<input type="text" name="subject"/><br /><br />
    Comments:<br /> <textarea name="comments" value=""  width="50"/>
    <hr />
    <button type="button">Submit</button>
</div>
  )
 }
}

Here's the codepen

Answer 1

The actual problem is in code at line

this.setState({ [this.state.meet]: event.target.checked });

the way the property is being set inside this.setState.

[this.state.meet] evaluates to "false", hence the state is set taking into consideration key as "false" and value as "event.target.checked",

change it to this.setState({ meet: event.target.checked });

and it will work, state changes as desired.

Extra Explanation:

if, this.state = { meet: false, secret: false, subject: "", comments: "", false:"x", true:"c" };

and this.setState({ [this.state.meet]: event.target.checked }); is used

after above line if you do console.log(this.state);

output will be

Object { comments: "", false: true, meet: false, secret: false, subject: "", true: "c" }

thus changing the key computed via square brackets [this.state.meet]

Answer 2

It seems that when you are updating state you are setting the value to a different prop. this.setState({[this.state.meet]:event.target.checked}) . By wrapping this.state.meet with brackets [] you are using the value of this.state.meet as the prop name, in this case "false", and not "meet".

You should be fine without the brackets this.setState({meet:event.target.checked})

Answer 3

handleMeetCheckBox (event) {
  const { value, name } = event.target;
  this.setState({[name]: value})
}

printState () {
  console.log(this.state);
}


render(){
  return(
     <div>
        <input 
        type="checkbox" 
        name="meet" 
        checked={this.state.meet} 
        onChange={this.handleMeetCheckBox} 
        />

       Want to meet?<br />

       <input type="checkbox" name="secret" onChange=
        { this.handleMeetCheckBox} />

       Secret?

       <p>If 'Secret' then....</p><br />

       Subject:<input type="text" name="subject" onChange= 
              {this.handleMeetCheckBox}/><br /><br />

       Comments:<br /> <textarea name="comments" value=""  width="50"
           onChange={this.handleMeetCheckBox}/>

       <hr />

       <button type="button" onClick={this.printState}>Submit</button>
   </div>
        )
      }
     }