title: ReactJS ES6 syntax for handling events
body: <p>I am fairly new to ReactJS, Redux and ES6, and I am trying to implement an event-handler where my chat body would hide or unhide as i click the header (kind of like what Facebook chat widget does). My problem is I cannot get the syntax correctly from a copied source. Here is my code:</p>
  
  <pre><code>import React, {Component} from 'react';
  import chat from './styles.css';
  import {connect} from 'react-redux';
  
  class ChatWidget extends Component {
  
    handleClick(event) {
      console.log("test")
    }
  
    render() {
      return (
        &lt;div className={chat.box}&gt;
  
          &lt;div className={chat.container}&gt;
  
            &lt;div onClick={onClick={this.handleClick.bind(this)}} 
                 className={chat.header}&gt;
              &lt;span className={chat.name}&gt;Idol&lt;/span&gt;
            &lt;/div&gt;
  
            &lt;div className={chat.body}&gt;
              This is the Body of the chat
            &lt;/div&gt;
  
            &lt;div className={chat.chat}&gt;
              &lt;input type="text" placeholder="Ask anything..." /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      user: state.activeUser
    };
  }
  
  export default connect(mapStateToProps)(ChatWidget);
  </code></pre>
  
  <p>Error:</p>
  
  <pre><code>&gt; 16 |           &lt;div onClick={onClick={this.handleClick.bind(this)}}
       |                                      ^
  </code></pre>