functional React components with TypeScript using generic props

Question

I am trying to understand and solve my own problem which is related to react components generic props.I have taken this code example from this article functional React components with TypeScript using generic props. Unfortunately, I couldn't reproduce the same in the Codesandbox and I get a ts error. Link to sandbox - link to sandbox

Typescript can't infer the right type for Tablle objects and throws an error

Property 'title' does not exist on type 'ObjectType'

I don't know what I am doing wrong, but seems like I just copied a part of the code from the article and it doesn't work.

import { render } from "react-dom";
import React, { PropsWithChildren } from 'react';


interface Props<ObjectType> {
  objects: ObjectType[];
  properties: {
    key: keyof ObjectType,
    title: string,
  }[];
}

function Table<ObjectType,>(
  { objects, properties }: PropsWithChildren<Props<ObjectType>>,
) {
  return (
    <table>
      <tbody>
        {
          objects.map(object => (
            <div>{object.title}</div>
          ))
        }
      </tbody>
    </table>
  );
}

const PostsPage = () => {
  const posts = [{id: 1, title: 'fsdf'}, {id: 2, title: '222fsdf'}];
  return (
    <div>
      <Table
         objects={posts}
         properties={[
           {
              key: 'title',
              title: 'Title'
            },
         ]}
      />
    </div>
  );
};

const rootElement = document.getElementById("root");
render(<PostsPage />, rootElement);

HaveSpacesuit · Accepted Answer · 2021-08-20 14:14:46Z

3

Usually generics are expressed as <T>, which can be any type. T or (ObjectType) doesn't guarantee anything about what properties it may have. If you try to access a property that TypeScript doesn't know about, it will complain.

If you want to assert that ObjectType has a title property, you can do

type WithTitle = {
  title: string;
};

<ObjectType extends WithTitle>

Or create a one-off object

<ObjectType extends { title: string }>

Though you can use <ObjectType> as your template, I'd recommend sticking with <T>, as it is the common convention, and you won't be tempted to think that T is a defined type, while you may be looking around for the definition of ObjectType.

answered Aug 20, 2021 at 14:14

HaveSpacesuit

4,0727 gold badges49 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

functional React components with TypeScript using generic props

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related