Sometimes, we want to extend a component with additional properties with React and TypeScript.

In this article, we’ll look at how to extend a component with additional properties with React and TypeScript.

How to extend a component with additional properties with React and TypeScript?

To extend a component with additional properties with React and TypeScript, we can create our own interface.

For instance, we write

export interface AnimalTableProps extends DataTableProps {
  onClickFunction: Function;
}

export class DataTable<T extends DataTableProps> extends React.Component<
  T,
  {}
> {}

export class AnimalTable extends DataTable<AnimalTableProps> {
  render() {
    //...
  }
}

to create the AnimalTableProps interface.

Then we use that as the argument for DataTable assuming it’s a generic type.

And then we can use the properties listed in AnimalTableProps and DataTableProps without compiler errors.

Conclusion

To extend a component with additional properties with React and TypeScript, we can create our own interface.