title: Creating onClick event for datalist option in React
body: <p>I've made a Twitch API widget which you can see here: <a href="https://twitch-react-drhectapus.herokuapp.com/" rel="nofollow noreferrer">https://twitch-react-drhectapus.herokuapp.com/</a></p>
  
  <p>At the moment, any time you search for something, there will be a list of suggestions. I'd like to make it so that when you click on one of the datalist options it will search for that user, rather than having to click on the 'Search' button. Basically the same search function as google has.</p>
  
  <p>How do I go about implementing this?</p>
  
  <p>Code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { fetchUser, fetchSuggestions } from '../actions/index';
  
  class SearchBar extends Component {
    constructor(props) {
      super(props);
      this.state = {
        term: ''
      };
      this.onInputChange = this.onInputChange.bind(this);
      this.onFormSubmit = this.onFormSubmit.bind(this);
    }
  
    onInputChange(event) {
      this.setState({
        term: event.target.value
      });
    setTimeout( this.props.fetchSuggestions(event.target.value), 300);
    }
  
    renderSuggestions(sug, i) {
      return (
        &lt;option key={i} value={sug.display_name} /&gt;
      )
    }
  
    onFormSubmit(event) {
      event.preventDefault();
      this.props.fetchUser(this.state.term);
      this.setState({
        term: ''
      });
    }
  
    render() {
      const { error, suggestions } = this.props;
      return (
  
          &lt;form
            className='input-group'
            onSubmit={this.onFormSubmit}&gt;
            &lt;input
              className='form-control'
              placeholder='Search for a Twitch user'
              value={this.state.term}
              onChange={this.onInputChange}
              list='suggestions' /&gt;
            &lt;span className='input-group-btn'&gt;
              &lt;button className='btn btn-primary'&gt;
                Search
              &lt;/button&gt;
            &lt;/span&gt;
            &lt;datalist id='suggestions'&gt;
              {suggestions.map(this.renderSuggestions)}
            &lt;/datalist&gt;
          &lt;/form&gt;
  
  
          // {/* {error &amp;&amp; &lt;div className='alert alert-danger'&gt;{error}&lt;/div&gt;} */}
  
  
      )
    }
  }
  
  function mapStateToProps({ error, suggestions }) {
    return { error, suggestions };
  }
  
  export default connect(mapStateToProps, { fetchUser, fetchSuggestions })(SearchBar);
  </code></pre>