Question: I want to retrieve the value of my checkbox when it is checked.

I am using this "<http://react-component.github.io/checkbox/>".

My code looks like this.

```
<div className="user_box">
    { check.map((values , i)=> {
        return <Checkbox
            name = "checkbox"
            onChange={this.checkvalue.bind(this)}
            value={values.username} 
        />
    })}
</div>

```

My function:

```
checkvalue(e){
    // var all_users = [];
    // var value = this.checkbox.value;
    // all_users.push(value);
    // console.log(all_users);

    console.log('checkbox checked:', (e.target.checked));
}

```

I'm not understanding how to retrieve the value of the checkbox.

Answer: 
you need to pass the "e, Synthetic event parameter to your handler" :

```
handleChange(e) {
  let isChecked = e.target.checked;
  // do whatever you want with isChecked value
}

render() {
  // ... your code here
  return (
    {/* your other jsx here */}
    <Checkbox otherProps onChange={e => this.handleChange(e)} />
    {/* your other jsx here */}
  );
}

```
We can get check box value by declaring `onChange={this.likeClicked} defaultChecked={false}` on input element properties

```
  constructor(props){
    super(props)
    this.likeClicked = this.likeClicked.bind(this)
  }

  likeClicked(){
    console.log(event.target.checked, event.target.id);
  }

  render(){
    return (
      <div className='px-3'>
          <div className='item-header item-wrapper cirle'>
            <input 
               type="checkbox" 
               onChange={this.likeClicked}  
               defaultChecked={false}  
               className="checkbox" 
               id={`checkbox_${this.props.product.sku}`} 
            />
            <label htmlFor={`checkbox_${this.props.product.sku}`}> 
               <HeartIcon className="heart-svg"></HeartIcon>
            </label>
          </div>
      </div>
    );
  }

```