Here's my code:
import { Typeahead } from "react-bootstrap-typeahead";
import { actorMovieDTO } from "../actors/actors.model";
interface typeAheadActorsProps{
displayName:string;
actors: actorMovieDTO[];
}
function TypeAheadActors(props: typeAheadActorsProps){
const actors: actorMovieDTO[]=[{
id:1, name: "Felipe", character: '',picture:''
},
{
id:2, name: "Fernando", character: '', picture:''
},
{
id:3, name: "Jesica", character: '', picture:''
}]
return(
<>
<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...." >
</Typeahead>
</>
)}export default TypeAheadActors
This is my actors.model class
export interface actorMovieDTO{
id:number;
name: string;
character: string;
picture: string;}
I'm trying to use the Typeahead component to implement an actor search feature. However, when typing in the input, I'm getting the error mentioned above.
The error seems to be related to the labelKey prop, where I'm specifying labelKey={(actor) => actor.name}. The name property does exist on my actorMovieDTO interface, so I'm not sure why I'm getting this error.
I've already checked that the actorMovieDTO type is correctly imported and defined. I'm using the latest version of react-bootstrap-typeahead. How t fix this error
I'm doing the same exact course and i encountered a similar problem but with map
error TS2339: Property 'x' does not exist on type 'Y'
This worked for that problem but in this case i'm having a hard time figuring out how to implement it in a simple manner
Edit: How to use TypeAhead in Reactjs 18
Never mind, this works everytime even if it's not the cleanest solution