title: React AsyncTypeahead using Typescript
body: <p>I'm trying to use the module <strong>React Bootstrap Typeahead</strong> (<a href="https://github.com/ericgio/react-bootstrap-typeahead" rel="nofollow noreferrer">original</a> and <a href="https://github.com/DefinitelyTyped/DefinitelyTyped" rel="nofollow noreferrer">type</a> versions) in React using tsx files.</p>
  
  <p>Im using the following versions:</p>
  
  <pre><code>"@types/react-bootstrap-typeahead": "3.4.5"
  "react-bootstrap-typeahead": "3.4.3"
  
  </code></pre>
  
  <p>I builded the following <strong>SimpleAsyncExample</strong> class, trying to test the component by always return the same results no matter what the user types, but with a delay in the response...</p>
  
  <pre class="lang-js prettyprint-override"><code>import * as React from 'react';
  import {AsyncTypeahead, ClearButton, Token} from 'react-bootstrap-typeahead';
  
  interface State {
    capital: string;
    name: string;
    population: number;
    region: string;
    setValue: (value: State) =&gt; void;
  }
  
  const options: State[] = [
    { name: 'Alabama', population: 4780127, capital: 'Montgomery', region: 'South', setValue: () =&gt; {} },
    { name: 'Alaska', population: 710249, capital: 'Juneau', region: 'West', setValue: () =&gt; {} },
    { name: 'Arizona', population: 6392307, capital: 'Phoenix', region: 'West', setValue: () =&gt; {} },
    { name: 'Arkansas', population: 2915958, capital: 'Little Rock', region: 'South', setValue: () =&gt; {} },
    { name: 'California', population: 37254503, capital: 'Sacramento', region: 'West', setValue: () =&gt; {} },
    { name: 'Colorado', population: 5029324, capital: 'Denver', region: 'West', setValue: () =&gt; {} },
  ];
  
  type propTypes = {};
  type defaultProps = {
    isLoading: boolean,
    options: State[]
  };
  
  export default class SimpleAsyncExample extends React.Component&lt;propTypes, defaultProps&gt; {
  
    state = {
      isLoading: false,
      options: []
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;AsyncTypeahead
            {...this.state}
            id="typeahead"
            delay={800}
            emptyLabel="No se encontraron resultados"
            ignoreDiacritics={true}
            minLength={3}
            onSearch={this.onSearch}
            placeholder="Insert text to search"
            promptText="Searching"
            searchText="Searching"
            renderMenuItemChildren={(selectedItem: State, props) =&gt; {
              return &lt;Token
                active
                disabled={false}
                tabIndex={5}
                href="https://test.com"
                onRemove={() =&gt; console.log(props.text)}&gt;
                {selectedItem.name}&lt;ClearButton onClick={() =&gt; {}} /&gt;
              &lt;/Token&gt;;
            }}
          /&gt;
        &lt;/div&gt;
      );
    }
  
    onSearch = (query: string) =&gt; {
      this.setState({isLoading: true});
      setTimeout(() =&gt; {
        this.setState({isLoading: false, options,});
      }, 2000);
    }
  }
  </code></pre>
  
  <p>I also configured (as indicated on the documentation) the css import...</p>
  
  <pre><code>import 'react-bootstrap-typeahead/css/Typeahead.css';
  import 'react-bootstrap-typeahead/css/Typeahead-bs4.css';
  </code></pre>
  
  <p>This app isn't working, doesn't suggest any results.</p>
  
  <p>The thing is that in the test or examples the there is none involving the AsyncTypeahead component and I didn't found any example, so if anyone has a solution, or maybe another module recommendation that work with Bootstrap 4 and React (with Typescript) or a working example that use this library will be gladly appreciated.</p>