TypeScript types for React component where prop is an array of objects?

Question

My React component has a prop called propWhichIsArray which will be an array of objects. These objects will have an id which is an ID and text which is a string. How can you type this with TypeScript?

type Props = {
  propWhichIsArray: {
    id,
    text: string;  
  }[]
};

const Component: React.FC<[Props]> = ({ propWhichIsArray }) => {
  //

Im getting an error:

Property 'propWhichIsArray' does not exist on type '[Props] & { children?: ReactNode; }'. TS2339

Nicholas Tower · Accepted Answer · 2022-06-16 20:41:10Z

30

The main issue is that you're doing React.FC<[Props]> instead of React.FC<Props>. With the square brackets, you're creating a tuple type, whose's zeroth element is of type Props, and then you're having that tuple be the props of your component.

interface Props {
  propWhichIsArray: {
    id: ID; // I assume ID is defined elsewhere
    text: string;
  }[]
}

const Component: React.FC<Props> = ({ propWhichIsArray }) => {

If this data in the array is being used in other places, you may want to pull it out to its own interface:

interface Thingamajig {
  id: ID;
  text: string;
}

interface Props {
  propWhichIsArray: Thingamajig[];
}

edited Jun 16, 2022 at 20:41

answered Sep 10, 2019 at 18:40

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

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

1 Comment

Brendan Over a year ago

That second interface with the strongly typed array as a property in Props is what I always forget to do. Trying to burn that into my brain!

Collectives™ on Stack Overflow

TypeScript types for React component where prop is an array of objects?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related