Typescript array of objects as props

Question

import React from "react";
import SingleEvent from "./SingleEvent";
interface Item {
  id: string;
  title: string;
  description: string;
  location: string;
  date: string;
  image: string;
  isFeatured: false;
}

export default function EventList({ items }) {
  return (
    <ul>
      {items.map((item: Item) => (
        <SingleEvent key={item.id} />
      ))}
    </ul>
  );
}

I have this component. Here I destructure the props and get the items array. I do want to define the type of that array.

I tried this

function EventList({ items :Item[]})

But this seems not working and also the items props can be an empty array as well.

How do I achieve this using TS?

S. J. Hoon · Accepted Answer · 2021-10-04 15:07:22Z

10

When you receive an object as an argument in a function, writing the type information becomes a bit tricky.

You would have to do it like this.

export default function EventList({ items }: { items: Item[] }) {

This makes the code long and repeating, so I personally recommend making a new interface for the props.

interface Props {
  items: Item[]
}

export default function EventList({ items }: Props) {

The reason your original code didn't work was because a colon inside Javascript destructuring means renaming that variable. That is why Typescript didn't recognize it as type information.

edited Oct 4, 2021 at 15:07

answered Oct 4, 2021 at 15:00

S. J. Hoon

3174 silver badges9 bronze badges

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

Comments

Zouhair Dre · Accepted Answer · 2021-10-04 15:23:44Z

1

You should try using Array<T>, here is an example, it works also with an empty array []

https://codesandbox.io/s/distracted-neumann-3hyux

answered Oct 4, 2021 at 15:23

Zouhair Dre

6386 silver badges16 bronze badges

Comments

Matthias S · Accepted Answer · 2021-10-04 15:01:16Z

0

You need to define the props, and then your destructured variables will infer the type from their object.

So basically, your props can look like this

type EventListProps = {
  items: Item[]
}

and then your component would be:

function EventList(props: EventListProps)

which you can also write as

function EventList({items}: EventListProps)

answered Oct 4, 2021 at 15:01

Matthias S

3,5834 gold badges26 silver badges33 bronze badges

Comments

rnr · Accepted Answer · 2021-10-04 15:25:01Z

-2

You can try with any as the particular object named items does not exist in your interface. Also no need to loop object. Try this this works.

export default function EventList({ item }: any) {
  return (
    <ul>
        <SingleEvent key={item.id} />
    </ul>
  );
}

answered Oct 4, 2021 at 15:25

rnr

942 silver badges13 bronze badges

Collectives™ on Stack Overflow

Typescript array of objects as props

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related