How to use TypeAhead in Reactjs 18

Question

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}

Answer 1

I fixed it by ignoring Typescript error. Reference

Use // @ts-ignore to ignore the type checking errors on the next line in a TypeScript file.

Do This:

options ={actors}
// @ts-ignore
labelKey = {actor => actor.name}

Hope it shall work.