Typing an array of objects as props in React

Question

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[]'

items doesn't exist on ItemProps[], because that's an array. It doesn't even exist on the things in the array. Also the props argument is always an object, not an array. Did you mean { items: ItemProps[] }? — jonrsharpe
– jonrsharpe, Commented May 3, 2022 at 20:05
The props object can't be Something[], because it is always an object, and never an array. Arrays can be passed within the props object. I think what you should do is { items }: { items: ItemProps[] }. — mstephen19
– mstephen19, Commented May 3, 2022 at 20:05
You are destructuring. Without that, you'd write function ItemList(props: { items: ItemProps[] }) With destructuring, you'll still need the items: key. — user5734311
– user5734311, Commented May 3, 2022 at 20:08

Nicholas Tower · Accepted Answer · 2022-05-03 20:05:32Z

3

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[] }) {

answered May 3, 2022 at 20:05

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

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

1 Answer 1