Unable to add multiple AsyncTypeahead in single page

Question

I am currently encountering an issue where I am unable to assign dynamic options for the dynamic AsyncTypeahead created.

How do I add options as dynamic to individual typeahead list ?

Has anyone encountered similiar issue ? I have highlighted the place where we pass options.

    Sample code:


    <AsyncTypeahead
                            labelKey="id"
                            **options={options}**
                            inputProps={{id:`${key}`}}
                            clearButton={true}
                            minLength={5}
                            isLoading={isLoading}
                            filterBy={filterByCallback}
                            onSearch={this.handleSearch}
                            placeholder="Search "
                            onChange={this.handleTypeAheadChange(key)}
                            renderMenuItemChildren={(option) => (
                                <div>
                                    {option.id} {option.name}
                                </div>
                            )}

                        />

     <AsyncTypeahead
                             labelKey="id"
                             **options={options1}**
                             inputProps={{id:`${key}`}}
                             clearButton={true}
                             minLength={5}
                             isLoading={isLoading}
                             filterBy={filterByCallback}
                             onSearch={this.handleSearch}
                             placeholder="Search "
                             onChange={this.handleTypeAheadChange(key)}
                             renderMenuItemChildren={(option) => (
                                 <div>
                                     {option.id} {option.name}
                                 </div>
                             )}

                        />


       <AsyncTypeahead
                               labelKey="id"
                               **options={options2}**
                               inputProps={{id:`${key}`}}
                               clearButton={true}
                               minLength={5}
                               isLoading={isLoading}
                               filterBy={filterByCallback}
                               onSearch={this.handleSearch}
                               placeholder="Search "
                               onChange={this.handleTypeAheadChange(key)}
                               renderMenuItemChildren={(option) => (
                                   <div>
                                       {option.id} {option.name}
                                   </div>
                               )}

                        />

/**/
 handleTypeAheadChange = name => values => {
    this.setState({
        [name]: values[0]
    });

}

Answer 1

You should be able to take a similar approach with handleSearch as you do with handleTypeAheadChange:

<AsyncTypeahead
  onSearch={this.handleSearch(key)}
  options={this.state[`options${key}`] || []}
  ...
/>

handleSearch = (key) => (query) => {
  /* Do async fetch... */

  this.setState({
    [`options${key}`]: results,
  });
}