React typescript - object is possibly undefined

Question

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

Sinan Yaman · Accepted Answer · 2021-09-23 12:28:25Z

4

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

answered Sep 23, 2021 at 12:28

Sinan Yaman

5,9562 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TommyD Over a year ago

nice one I actually tried it on the othe end - items?.find((item: DropdownType) => item.id === selectedItem).label

Sinan Yaman Over a year ago

Apart from that, why do you use == and not ===? I strongly suggest using triple equals :)

Collectives™ on Stack Overflow

React typescript - object is possibly undefined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related