title: Button onClick triggered when init in React application
body: <p>I'm trying to make a simple dropdown menu but I have some problems with onClick event on list items which are in child component, the 'handleClick' function is suppose to trigger when click on a list item, but the function is trigged twice when page loaded (because there are two lists here), and when I click on list again, it will trigger twice again, I'm sure it's a simple question but I passed few hours on it but I don't really understand what it happen here, hope someone can help me please, thx!</p>
  
  <p>here is my code:</p>
  
  <pre><code>import React from 'react';
  import Dropdown from './../elements/dropdown.js!jsx';
  
  export class TestPage extends React.Component {
  
    constructor() {
      super();
      this.noteLIst = [
        {name: 'note', label: 'Note global'},
        {name: 'digitalCulture', label: 'Digital Culture'}
      ];
    }
  
    handleItemClick(company) {
      console.log(company);
    }
  
    render() {
      return (
        &lt;div className="widget"&gt;
          &lt;Dropdown list={this.noteLIst} selected={this.noteLIst[0]} whenItemClicked={this.handleItemClick} /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Dropdown.js</p>
  
  <pre><code>import React from 'react';
  
  export class Dropdown extends React.Component {
  
    constructor() {
      super();
      this.state = {
        listVisible: false
      };
    }
  
    showMenu() {
      this.setState({
        listVisible: true
      });
      document.addEventListener("click", this.hide);
    }
  
    hide() {
      this.setState({
        listVisible: false
      });
      document.removeEventListener("click", this.hide);
    }
  
    handleClick(item) {
      console.log(item); // Here will log 2 items
      this.props.whenItemClicked(item);
    }
  
    render() {
      let listItems = _.map(this.props.list, (list, index) =&gt; {
        return (
          &lt;li key={index} className={list} onClick={this.handleClick(list)}&gt;{list.name}&lt;/li&gt;
        );
      });
  
      return (
        &lt;div className = {"dropdown-container" + (this.state.listVisible ? " show" : "")}&gt;
          &lt;div className = {"dropdown-display" + (this.state.listVisible ? " clicked" : "")} onClick = {this.show}&gt;
            &lt;span&gt;
              &lt;img className="icon-arrow-bottom" src="build/image/arrow_bottom_black.png" /&gt;
            &lt;/span&gt;
            &lt;span&gt;
              {this.props.selected.name}
            &lt;/span&gt;
          &lt;/div&gt;
          &lt;ul className="dropdown-list" &gt;
            {listItems}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>