Get selected value from react bootstrap AsyncTypeHead

Question

I am using react bootstrap AsyncTypeHead. I type keywords and it suggests values from the backend, then I click one of the suggestions and try to get the value selected, but it seems event does not exist. It throws all kind of errors. What could be the issue? I am trying to do it through onChange attribute with event.target.value:

<AsyncTypeahead
  filterBy={filterBy}
  id="async-example"
  isLoading={isLoading}
  labelKey="login"
  minLength={3}
  onSearch={handleSearch}
  onChange={ (event) => setCitiesSend([...citiesSend, event.target.value])}

If instead event.target.value I put alert('test') it throws alert multiple times. It seems to be changing on each typed letter.

Full example: React Bootstrap Typeahead - Asynchronous Searching

Answer 1

The onChange function returns a value. So, your code will be.

<AsyncTypeahead
   filterBy={filterBy}
   id="async-example"
   isLoading={isLoading}
   labelKey="login"
   minLength={3}
   onSearch={handleSearch}
   onChange={ (value) => setCitiesSend((previous) =>[...previous, ...value])}
/>