How to use TypeAhead in Reactjs 18
Asked on September 14, 2022
I am using react-bootstrap-typeahead 5.1.8 version. When I using typeahead it's show mistake in name. My code:
import { Typeahead } from "react-bootstrap-typeahead";
import { actorMovieDTO } from "../actors/actors.model";
export default function TypeAheadActors(props: typeAheadActorsProps) {
const actors: actorMovieDTO[] = [{
id: 1, name: 'Felipe', character: '', picture: ''
},
{
id: 2, name: 'Fernando', character: '', picture: ''
},
{
id: 3, name: 'Jessica', character: '', picture: ''
}]
return (
<>enter code here
<label>{props.displayName}</label>
<Typeahead
id="typeahead"
onChange={actor => {
console.log(actor);
}}
options={actors}
labelKey={actor => actor.name}
filterBy={['name']}
placeholder="Write the name of the actor..."
minLength={1}
/>
</>
)
}
interface typeAheadActorsProps {
displayName: string;
actors: actorMovieDTO[];
}
Error:
any
Property 'name' does not exist on type 'Option'. Property 'name' does not exist on type 'string'.ts(2339)
View Problem
No quick fixes available
Problem in this line of code labelKey={actor => actor.name}
