title: React checkbutton onChange event returns synthetic event
body: <p>I have a React checkbox component. I'm trying to change the state on every click and run a function based on the previous state. On the React everytime I click on the button I'm trying to return event to my console.log function in the index.js. </p>
  
  <p>But it's always returning synthetic event and I can't reach the event.target.value. </p>
  
  <p>My index.js and props are;</p>
  
  <pre><code>ReactDOM.render(&lt;ReactCheckBox
      isChecked={false}
      textCheck="Checked"
      textUncheck="Checked"
      onCheckedRun={event =&gt; console.log(event.target)}
      onUncheckedRun={event =&gt; console.log(event.target)}
      buttonPosition="right"
  /&gt;, document.getElementById('myCheckBox'))
  </code></pre>
  
  <p>and my ReactCheckBox component is;</p>
  
  <pre><code>import React, { Component } from 'react'
  
  class ReactCheckBox extends Component {
      constructor(props) {
          super(props)
          this.state = {
              checked: ""
          }
          this.onChangeHandler = this.onChangeHandler.bind(this)
  
      }
      componentDidMount() {
          this.setState({
              checked: this.props.isChecked
          })
      }
  
      onChangeHandler(event) {
          this.setState(function (previousState, props) {
              console.log('State: ',this.state.checked)
              if (previousState.checked === true) {
                  props.onCheckedRun(event)
              } else {
                  props.onUncheckedRun(event)
              }
              return {
                  checked: !this.state.checked
              }
          }
          )
      }
  
      render() {
          if (this.props.disabled === "true") {
              return (
                  &lt;div&gt;
                      &lt;div className="form-check"&gt;
                          &lt;label className="form-check-label"&gt;
                              &lt;div className="uniform-checker border-primary-600 text-primary-800"&gt;
                                  &lt;span className="checked"&gt;
                                      &lt;input onChange={this.onChangeHandler} type="checkbox" className="form-check-input-styled-primary" defaultChecked={this.state.checked ? 'checked' : 'unchecked'} data-fouc="" disabled&gt;&lt;/input&gt;
                                  &lt;/span&gt;
                              &lt;/div&gt;
                              Primary checkbox
                          &lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              )
          }
          else {
              return (
                  &lt;div&gt;
                      &lt;div&gt;
                          &lt;div className="form-check"&gt;
                              &lt;label className="form-check-label"&gt;
                                  &lt;div className="uniform-checker border-primary-600 text-primary-800"&gt;
                                      &lt;span className={this.state.checked ? 'checked' : 'unchecked'}&gt;
                                          &lt;input onChange={this.onChangeHandler} type="checkbox" className="form-check-input-styled-primary" defaultChecked={this.state.checked ? 'checked' : 'unchecked'} &gt;&lt;/input&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
                                  Primary checkbox
                              &lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              )
          }
      }
  }
  
  export default ReactCheckBox
  </code></pre>
  
  <p>Has anyone had the same issue ? How can I over come synthetic event and get the real event so I can reach value of it ?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p><strong>Synthetic error event</strong></p>
  
  <blockquote>
    <p>index.js:1375 Warning: This synthetic event is reused for performance
    reasons. If you're seeing this, you're accessing the method
    <code>currentTarget</code> on a released/nullified synthetic event. This is a
    no-op function. If you must keep the original synthetic event around,
    use event.persist(). See fb.me/react-event-pooling for more
    information.</p>
  </blockquote>