Typing an array of objects as props in React

Advertisements

I have a functional component like

function ItemList({ items }: ItemProps[]) {
  return <p>items[0].name</p>
}

and I’m creating it like:

<ItemList items={items} />

items is an array of objects like [{name: 'a' id:0}, {name: 'b' id:1}].

Everything is working, but in ItemList.jsx TypeScript is telling me Property 'items' does not exist on type 'ItemProps[]'

>Solution :

function ItemList({ items }: ItemProps[]) {

This type doesn’t mean that items is an array, it means the props object is an array. You need:

function ItemList({ items }: { items: ItemProps[] }) {

Leave a ReplyCancel reply