react-bootstrap-typeahead labelKey Typescript

Question

I have the same question as discussed (but never answered) in ericgio's answer to this question React AsyncTypeahead using Typescript

There seems to be a problem with the type definitions for labelKey

I get the following error from this code:

<Typeahead
     id="basic-typeahead-single"
     labelKey="name"
     onChange={this.changeEdgeName}
     options={this.state.streetNames}
     placeholder=""
    />

Overload 2 of 2, '(props: TypeaheadProps, context?: any): Typeahead', gave the following error. Type 'string' is not assignable to type 'undefined'. TS2769

dependencies:

"@types/react-bootstrap-typeahead": "^3.4.6",
    
"react-bootstrap-typeahead": "^5.1.1",

Answer 1

I found a workaround!

I separated the tag to its own component, in that component the labelKey was not required for some reason.

I have no idea why this works, but it does for me!

Answer 2

I was able to get around this by casting as follows:

import { Typeahead, TypeaheadLabelKey } from 'react-bootstrap-typeahead';
...

labelKey={'displayName' as TypeaheadLabelKey<string>}

Where displayName is your labelKey.