Скачать или смотреть How to Set Default Props in a React Functional Component Without defaultProps

Discover how to effectively use default props in a React functional component without explicitly using `defaultProps`. Learn about the `Partial` utility type for better nullable handling!
---
This video is based on the question https://stackoverflow.com/q/67451017/ asked by the user 'ryuzaki' ( https://stackoverflow.com/u/15873439/ ) and on the answer https://stackoverflow.com/a/67451236/ provided by the user 'Nadia Chibrikova' ( https://stackoverflow.com/u/4434850/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Is there any way to write the function without explicitly using defaultProps in react function component?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Set Default Props in a React Functional Component Without defaultProps

When working with React, setting default props can be quite handy, especially when you want your components to function smoothly, even when certain props are missing. Many developers are accustomed to using the defaultProps syntax. However, there’s a more modern approach that you might find more intuitive and cleaner, especially in ES6. In this guide, we will explore how to use default props without explicitly using defaultProps and discuss how to solve common issues encountered while doing so.

The Problem: Missing Props Error

Suppose we have a React functional component that needs to display a heading and some children as follows:

[[See Video to Reveal this Text or Code Snippet]]

While this works perfectly, developers often prefer to make use of ES6 default parameters directly in their functional components. So, in an attempt to set a default heading directly in the function parameters, the following code was implemented:

[[See Video to Reveal this Text or Code Snippet]]

However, after this adjustment, a problematic error crops up:

[[See Video to Reveal this Text or Code Snippet]]

This error indicates that React is now expecting that the heading prop must be passed when using this component, even if we tried to set a default value.

The Solution: Utilizing Partial Utility Type

To resolve the issue and use a default value for heading, we need to leverage TypeScript’s Partial utility type. This utility type makes all properties in the given type optional. Here’s how to modify your App function to make it work:

[[See Video to Reveal this Text or Code Snippet]]

Breakdown of the Changes

Using Partial<T>: The addition of Partial around the typeof defaultContainerProps allows every property defined in defaultContainerProps to be optional. This means that the heading prop is no longer required when the component is used, which perfectly suits our goal of having a default value.

Setting the Default Value: By setting heading = defaultContainerProps.heading, you ensure that the component will take the default heading when none is provided, effectively handling the absence of the heading prop.

With these changes, your component becomes more flexible and maintains clean usage without the need for the more verbose defaultProps.

Conclusion

Using default parameters for props in functional components is not only a cleaner approach but also makes your component more readable and easier to use. By employing the Partial utility type, you can avoid unnecessary prop validation while enjoying the benefit of default values. So next time when you're faced with similar issues, try out this method and streamline your React components!