You already know how to pass properties from a parent React component to a child React component. If you need to refresh your memory - please check this tutorial.
But did you know that in React you can define the default properties?
The default properties can be very helpful if we absolutely need to make sure that our child component gets all the necessary properties and we can't rely on the fact that it's parent component will pass those properties at all times.
Think of this situation: I've created useful React.js component and you've decided to reuse it in your React.js application. You'll be using my component as a child component for one of your components. My component depends on the fact that you pass all the properties, but you simply might not have them - what do you do?
The answer is: I should design my React component with that scenario in mind. And if you don't have your custom properties - I can use the default properties.
Let's take a look at an intuitive example.
In this tutorial, we're going to build this application:
You can find the full source code in this GitHub repository.
Our application is going to render 3 panels with some text in each of them. The text will be different for each panel.
Our application will be made of 2 React.js components:
Application component is a contrainer component - it encapsulates our entire React.js application.
Panel component on the hand - renders a single panel with some text in it.
Let's create the
Panel component first:
Notice how in
render function we're referencing to
whatIsUniqueAboutThisPanel are both properties that we expect to get from a parent component. However, here we're making a design decision to not rely on the fact that
didYouKnowThat will always be provided by a parent component. So we need to provide a default value for
didYouKnowThat property in case a parent component forgets to do so. To do this React has a special function: -
getDefaultProps returns on object with the default properties that we can access via
You can see how our first and second panels render
This default property will be shared across all Panel component instances text. However the third panel has a different text:
You can overwrite the default properties. - this is because a parent component can overwrite the default property of a child component.
Let's take a look at our
Application component renders 3 instances of
Panel component. The first two instaces get only one property each -
whatIsUniqueAboutThisPanel. Because we didn't provide
didYouKnowThat property for them - the default value defined in
Panel component class is used.
This is convenient, because imagine a scenario in which our
Application component simply has no values for
didYouKnowThat property - what would we render without a default property?
On the other hand our third instance of the
Panel component has two properties:
Application component provides it's own value for
You can overwrite the default properties - that value overwrites the default value provided by
Panel component class -
This default property will be shared across all Panel component instances.
And that's how you use the default properties in React.js.
Thank you for your attention!