reactjstypeaheadreact-bootstrap-typeahead

Typeahead error: Property 'name' does not exist on type 'Option'


I'm encountering an issue with the react-bootstrap-typeahead library in my React application. When using the Typeahead component, I'm getting the following error: "Property 'name' does not exist on type 'Option'".

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


Solution

  • 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