Accepted answer

What about using an arrow function in the onClick handler?

handleClick = (e, data) => {
    // access to here

<input type="checkbox" value={} defaultChecked={false} onClick={((e) => this.handleClick(e, data))}/>


First, if you bind null you won't get any context nor UIEvent object.

You need to change your onClick to 'onClick={this.handleClick}`.

And your handle function should look like

handleClick = (event) => {
    const { target: { value } } = event;

    // And do whatever you need with it's value, for example change state 
    this.setState({ someProperty: value });


Try this variant of code:

handleClick = (data, e) => {
    console.log(, data);

<input type="checkbox" value={} defaultChecked={false} onClick={this.handleClick.bind(this, data)}/>


You can use data- element attributes and they'll be available in the target element:

import React from 'react'

export default MyComponent = () => {
  const onClick = event => {

  return <div data-user="123" onClick={onClick}>Click me!</div>

Related Query

More Query from same tag