title: How to use DataSearch as controlled component from Reactivesearch?
body: <p>I'm new to ReactiveSearch library, and I implemented the DataSearch component with autosuggestion as my in-site SearchBar. I added <code>value</code> and <code>onChange</code> to in order to store the input value as a state, but as soon as I added the <code>value</code> prop, I can't type in the search bar any more. What's wrong?</p>
  
  <p>I also want to know what kind of callback function can I use when I click one of the suggestions to trigger some event, I tried <code>onClick</code>, but it didn't work. Here is my code, any help is appreciated!</p>
  
  <pre><code>import * as React from 'react';
  import {
    ReactiveBase,
    DataSearch,
  } from '@appbaseio/reactivesearch';
  
  import './SearchBar.scss';
  
  export default class SearchBar extends React.Component {
    constructor(props) {
      super(props);
      this.state = { searchTerm: '' };
    }
  
    handleInputChange = (event) =&gt; {
      this.setState({ searchTerm: event.target.value });
    };
  
    handleSearch = () =&gt; {
    // do something...
    };
  
    public render() {
      return (
        &lt;React.Fragment&gt;
          &lt;ReactiveBase
            app="rooms,floors,assets"
            url="http://localhost:9200"
            headers={{
              'Access-Control-Allow-Origin': '*'
            }}
            style={{ display: 'inline' }}
          &gt;
            &lt;DataSearch
              componentId="SearchRoom"
              dataField={['roomName', 'roomNumber', 'floorName', 'assetName']}
              placeholder="Search for rooms or assets"
              style={{ width: 500, display: 'inline-block' }}
              fuzziness={1}
              value={this.state.searchTerm}
              onChange={this.handleInputChange}
              //how to trigger handleSearch when I click one of the suggestions?
            /&gt;
          &lt;/ReactiveBase&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  </code></pre>