Reputation: 1043
I am trying to build a dropdown component in typescript and have run into an error.
I create the type and the data.
type DropdownType = {
id: number;
label: string;
};
const data: DropdownType[] = [
{ id: 0, label: "Istanbul, TR (AHL)" },
{ id: 1, label: "Paris, FR (CDG)" },
];
the set the initial data
const [items, setItem] = useState<DropdownType[]>(data);
However typescript tells me it is possibly undefined
{selectedItem
? items.find((item: DropdownType) => item.id === selectedItem).label
: "Select your destination"}
Any idea what I am doing wrong?
https://codesandbox.io/s/morning-leftpad-5ohhv?file=/src/Dropdown.tsx:1609-1741
Upvotes: 2
Views: 778
Reputation: 5946
It is because of the fact that .find
function returns undefined if the condition is never met. So:
items.find((item: DropdownType) => item.id === selectedItem)
can return undefined. You can use conditional chaining
:
items.find((item: DropdownType) => item.id === selectedItem)?.label
Upvotes: 4