Master Passing React Components as Props in TypeScript

Passing a React component as a prop in TypeScript can help greatly improve code organization and maintainability in your application. In this tutorial, we'll demonstrate how to pass React components as props in TypeScript and how to correctly type them. We'll cover what TypeScript is, why you'd want to pass components as props, and provide examples for better understanding.

What is TypeScript?link

TypeScript is a statically-typed superset of JavaScript that adds optional static types to the language. It's designed for the development of large applications and can be used to catch errors early in the development process. By utilizing TypeScript, you can effectively build more robust and maintainable applications, as the code is easier to understand and refactor.

Why Pass Components as Props?link

When building a complex application with many nested components, it's often useful to pass components as props to reduce code duplication and to maintain a cleaner, more modular structure. While this concept might seem foreign at first, it becomes more useful as your application's size and complexity increases. By passing a React component as a prop, it can be rendered dynamically based on different conditions, enhancing the application's overall flexibility.

Passing Components as Props in TypeScriptlink

Before diving into the examples, it's essential to understand the types of components in React: functional components and class components. In this guide, we'll outline both types and demonstrate how to pass them as props.

1. Functional Components

In a functional component, you might pass a prop with a specific name containing the another React component. For example, with the following ParentComponent, we'd like to pass the ChildComponent as a prop:

import React from 'react';

const ChildComponent: React.FC = () => <div>Hello World</div>;

const ParentComponent: React.FC = ({ child }: { child: React.FC }) => {
  const Component = child;

  return <Component />;
};

const App = () => {
  return <ParentComponent child={ChildComponent} />;
};

export default App;

In the code above, we define ChildComponent, which is a simple functional component that renders "Hello World". Then, we create ParentComponent that takes in a child component as a prop. Finally, in the App component, we pass the ChildComponent to the ParentComponent.

2. Class Components

For class components, you can use a similar approach, but keep in mind that you'll need to use React.ComponentType to type the prop. Let's create a simple class component, ChildClassComponent:

import React from 'react';

class ChildClassComponent extends React.Component {
  render() {
    return <div>Hello World from a Class Component</div>;
  }
}

Now, let's create a ParentClassComponent that accepts the ChildClassComponent as a prop and renders it:

import React from 'react';

type ParentClassComponentProps = {
  child: React.ComponentType;
};

class ParentClassComponent extends React.Component<ParentClassComponentProps> {
  render() {
    const { child: Component } = this.props;

    return <Component />;
  }
}

Lastly, pass the ChildClassComponent to the ParentClassComponent:

import React from 'react';

const App = () => {
  return <ParentClassComponent child={ChildClassComponent} />;
};

export default App;

Handling Props in Child Componentslink

When a child component requires props to be passed to it, you'll need to type the child component prop in the parent component. Let's take our ChildComponent and add a text prop:

import React from 'react';

type ChildComponentProps = {
  text: string;
};

const ChildComponent: React.FC<ChildComponentProps> = ({ text }) => <div>{text}</div>;

Now, in the ParentComponent, we'll update the types to account for the child component props:

import React from 'react';

type ParentComponentProps = {
  child: React.FC<{ text: string }>;
};

const ParentComponent: React.FC<ParentComponentProps> = ({ child }) => {
  const Component = child;

  return <Component text="Hello World" />;
};

As demonstrated, the code passes the text prop to the ChildComponent. The same concept can be applied to class components.

Conclusionlink

By mastering the technique of passing React components as props in TypeScript, you gain better control over your codebase and build more maintainable applications. Utilizing this approach can lead to cleaner code with fewer duplications and helps developers organize large applications more effectively.

Learn more about TypeScript best practices by diving into the official TypeScript Handbook and exploring useful resources available on the React TypeScript Cheatsheet.