Typing React Components and Props

The values a parent passes to a React component are its props, and the component receives them as one object. Typing a component is therefore one task: describing the shape of that object. This lesson builds one component, a ProfileCard, and adds one kind of prop in each section.

Typing a Function Component

The simplest form writes the type directly on the parameter:

const ProfileCard = (props: { name: string }) => {
  return <h2>{props.name}</h2>;
};

As the list of props grows, an inline type becomes hard to read