title: ReactJS onClick in list item
body: <p>I have a list and I wanna set onClick event when a list item is clicked. But my function isn't triggered even though I have bind the function. </p>
  
  <p>I have looked at TODO example (<a href="https://github.com/reactjs/redux/tree/master/examples/todos/" rel="noreferrer">TODO GITHUB</a>). In that example, onClick list item will dispatch an action and in the end it will change the Global State (Redux Store). </p>
  
  <p>What I wanna have is, when I click list item, it won't change Global State but it just change local state. I have initialize local state and onClickItemHandler function, but it seems my function isn't executed (no console.log result in chrome console).</p>
  
  <p>Here is my code</p>
  
  <pre><code>// Searchable Component
  class Searchable extends Component{
    constructor(props,context){
      super(props);
      this.state ={
        listAccount: [],
        style:{
          searchResultList:{
            listStyle: 'none',
            width: '100%',
            height: '0em'
          },
          searchResultItem:{
            listStyle: 'none',
            width: '100%',
            height: '0em'
          },
        }
      };
  
      this.onChange = this.onChange.bind(this);
      this.onFocus = this.onFocus.bind(this);
      this.onBlur = this.onBlur.bind(this);
      this.onItemClickHandler = this.onItemClickHandler.bind(this);
    }
  
    onChange(event){
      this.props.onInputChange(this.props.data.type, this.props.data.id,event.target.value);
    }
  
    onFocus(event){
      console.log("input on focus");
      const showResultList= {
        height: '10em',
        overflow:'auto'
      };
  
      const showResultItem= {
        height: '2.4em',
        visibility: 'visible'
      };
  
      let style= this.state.style;
      style.searchResultList = showResultList;
      style.searchResultItem = showResultItem;
      this.setState({style});
    }
  
    onBlur(event){
      console.log("input on Blur");
      const showResultList= {
        height: '0',
        overflow:'hidden'
      };
  
      const showResultItem= {
        height: '0',
        visibility: 'collapse'
      };
  
      let style= this.state.style;
      style.searchResultList = showResultList;
      style.searchResultItem = showResultItem;
      this.setState({style});
    }
  
    onItemClickHandler(event){
      console.log("test");
      console.log(event.target);
    }
  
    render(){
      return(
        &lt;div className="searchable"&gt;
          &lt;input type="search" className="input-searchable" value={this.props.data.input} onChange={this.onChange} onFocus={this.onFocus} onBlur={this.onBlur}/&gt;
          &lt;div className="search-result"&gt;
            &lt;SearchResultList
              ResultList={this.props.accounts}
              listStyle={this.state.style.searchResultList}
              listItemStyle={this.state.style.searchResultItem}
              onClick={this.onItemClickHandler}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  // SearchResultList Component
  const SearchResultList = ({ResultList, listStyle, listItemStyle, onClick}) =&gt; (
    &lt;ul style={listStyle} onClick={onClick}&gt;
    {
      ResultList.map((item,idx) =&gt;
        &lt;SearchResultItem
          key={++idx}
          style={listItemStyle}
          text={item.name}
          onClick={onClick}
          /&gt;
      )
    }
    &lt;/ul&gt;
  );
  
  
  // SearchResultItem Component
  const SearchResultItem = ({ onClick, text, style}) =&gt; (
    &lt;li
      style={style}
      onClick={onClick}
      &gt;
      {text}
    &lt;/li&gt;
  );
  </code></pre>