Specifying a default for a function component prop

Explore how to implement default values for function component props in React with TypeScript. Understand the differences between using defaultProps and default function parameters approaches. Gain knowledge to create strongly-typed props that improve code readability and maintainability.

We'll cover the following...

- defaultProps approach
- Default function parameters approach
- Wrap up

In the CodeSandbox project we were working on in the last lesson, we are going to implement a default value of “How are you?” for the message prop. We are going to implement this in 2 different ways.

defaultProps approach

The first way is to use a static property called defaultProps on the function component. This is set to an object literal that contains the values to set the props to:

Component.defaultProps = {
  prop1: value1,
  prop2: value2,
  ...
}

In our CodeSandbox project, use the ...

1.Why TypeScript?

2.Using basic types

3.Creating types

4.Working with generic types

5.Creating strongly-typed function component props

6.Creating strongly-typed function component state

7.Creating strongly-typed class components

8.Creating strongly-typed component events and event handlers

9.Creating strongly-typed context

10.Creating strongly-typed refs

11.Creating React projects with TypeScript using Create React App

12.Creating a React and TypeScript project manually

13.Putting everything together

Specifying a default for a function component prop

defaultProps approach