Set Optional props with Default Values in React TypeScript

Today, we’re going to dive into the world of React TypeScript and explore how to set optional props with default values. This nifty trick can make your components more flexible and easier to use. Ready to level up your coding skills?

Let’s get started!

What are Optional Props?

Before we dive into the how-to, let’s make sure we’re on the same page about what optional props are.

In the world of React, props (short for properties) are a way to pass information from one component to another. They’re like the ingredients in a recipe – they help determine what the final dish (or in our case, component) will look like.

Optional props are just like they sound – they’re props that aren’t required for the component to work. They’re like optional ingredients in a recipe. You can leave them out if you want, but adding them can give your dish (component) a little extra flavor.

How to set optional props with default values in React TypeScript?

To set optional props with default values in React TypeScript:

1. Mark the prop as optional. You can do this by using the optional operator (?).
2. Assign default values to the props. You do this when you’re destructuring the props in the function definition.

interface BookProps {
  name: string; // 👈️ required (no question mark)
  price?: number; // 👈️ marked optional
  author?: string; // 👈️ marked optional
}

function Book({ name, price = 9.99, author = "Jane Doe" }: BookProps) {
  return (
    <div>
      <h1>{name}</h1>
      <h3>Price($) : {price}</h3>
      <h3>Author: {author}</h3>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Book name="Fear of Flying" price={19.99} author="Erica Jong" />

      <hr />

      <Book name="In the Heart of the Sea" />
    </div>
  );
}

We marked price and author props as optional.

This means we can use the component with or without passing the price and author props.

If the value for an optional prop isn’t defined, it is set to an undefined value.

We also assigned default values to the price and author props in the definition of the Book component.

function Book({ name, price = 9.99, author = "Jane Doe" }: BookProps) {
  return (
    <div>
      <h1>{name}</h1>
      <h3>Price($) : {price}</h3>
      <h3>Author: {author}</h3>
    </div>
  );
}

Here, the price property in the interface is set to 9.99 by default, so if the price prop is not provided, it will get assigned a value of 9.99.

You can also set the entire props object as optional by marking all properties as optional.

interface BookProps {
  name?: string; // 👈️ marked optional
  price?: number; // 👈️ marked optional
  author?: string; // 👈️ marked optional
}

function Book({
  name = "In the Heart of the Sea",
  price = 9.99,
  author = "Jane Doe",
}: BookProps) {
  return (
    <div>
      <h1>{name}</h1>
      <h3>Price($) : {price}</h3>
      <h3>Author: {author}</h3>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Book name="Fear of Flying" price={19.99} author="Erica Jong" />

      <hr />

      <Book />
    </div>
  );
}

All the properties in the BookProps type are marked as optional, which means it can use the component without props.

We have set the default values for each prop in the Book component. So, the default values are applied if one of the props is not used.

Conclusion:

And that’s it! By setting optional props with default values in React TypeScript, you can make your components more flexible and easier to use. Remember, the optional operator (?) is your friend when you want to mark a property as optional.

Learn More:

• Never Type in TypeScript