ReactJS onClick in list item
<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>