How to write React function components in Typescript

In this tutorial, you will learn two different ways to strongly type React function components in Typescript

1. Using Props Type

This is a straightforward approach to type function components in Typescript

type UserProps = {
    name: string
  age: number
}

const User = (props: UserProps) => {
  return (
    <>
      <p>{props.name}</p>
      <p>{props.age}</p>
    </>
  )
};

export default User;

2. Using React.FC<> (Recommended)

You can also write a function component using React.FC or React.FunctionComponent

This is the most common and widely used approach to strongly type function components in React and Typescript

type AddressProps = {
    city: string
  country: string
}


const Address:React.FC<AddressProps> = (props) => {
  return (
    <>
      <p>{props.city}</p>
      <p>{props.country}</p>
    </>
  )
};

export default Address;

Related Solutions

• How to update parent state from child in React

• How to pass React components as props in TypeScript

• How to dynamically set Meta Title Tag in React