The article is translated from the source ( https://blog.bitsrc.io/understanding-react-default-props-5c504037d )
In this article, we’ll learn all about the default props in React. It will help us not only become better developers, but provide a better experience for our users as well. Start!
Short Intro
Reactjs, a JSX-based JavaScript UI library is the most popular JS library today. Thousands of applications are built using React, it offers a lot of features:
- High performance
- Smaller builds
- Virtual DOM
- Code reuse
- UI based on Components
- Runs on different platforms: Mobile / Tablet and Desktop
- Easy start for beginners
Built to use the Component
concept for each view or group of views. A React component
similar to an HTML element. And a component
is basically a class that contains:
- props
- data
- state (manipulated via
setState()
) - markup (delivered by
render()
)
All of these together create a UI widget.
So that’s fun, thanks? But you already know all of that.
components
are the primary tools we use to build interactive user interfaces. All React apps have native component
, often referred to as App component
React provides ways for components
pass data to each other and respond to each other’s events.
You can write a component
and use it as a child component
in a number of other components
– they are designed to be self-contained and loosely linked for this purpose.
Each component
contains valuable data about itself:
- Input data like?
- How to create a true component?
Let’s find out more
statement
As above, React components
take input in the props argument
1 2 3 4 5 6 7 8 9 10 11 12 | // ES6 class class CatComponent extends React.Component { constructor(props) {} render() { return <div>{this.props.catName} Cat</div> } } // Functional component function CatComponent(props) { return <div>{props.catName} Cat</div> } |
This is passed down from the parent component
1 2 3 4 5 6 7 8 9 10 11 12 | // ES6 class class CatsComponent extends React.Component { constructor(props) {} render() { return <div><CatComponent catName="Picky" /></div> } } // Functional component function CatsComponent() { return <div><CatComponent catName="Picky" /></div> } |
You see we’ve passed a catName
property with the value Picky
, CatComponent will get the property value from the props argument. All properties attached to a component
in React are passed in the props object to the child component
. The above will be passed like this:
1 2 3 4 | props = { catName: "Picky" } |
And if
1 2 3 4 | ... return <div><CatComponent catName="Picky" eyeColor="blue" age="4" /></div> ... |
The props
argument will be:
1 2 3 4 5 6 | props = { catName: "Picky", eyeColor: "blue", age: "4" } |
Child component
will access them from the props object with the name of the property acting as the key:
1 2 3 4 5 6 7 8 9 10 11 12 | // ES6 class class CatComponent extends React.Component { constructor(props) {} render() { return <div>{this.props.catName} Cat, Eye Color: {this.props.eyeColor}, Age: {this.props.age}</div> } } // Functional component function CatComponent(props) { return <div>{props.catName} Cat, Eye Color: {props.eyeColor}, Age: {props.age}</div> } |
The problem here is what happens if the parent component
doesn’t pass any properties to the child component
?
1 2 3 4 5 6 7 8 9 10 11 12 | // ES6 class class CatsComponent extends React.Component { constructor(props) {} render() { return <div><CatComponent /></div> } } // Functional component function CatsComponent() { return <div><CatComponent /></div> } |
Or the parent component
does not pass all the properties that the child component
displays.
1 2 3 4 5 6 7 8 9 10 11 12 | // ES6 class class CatsComponent extends React.Component { constructor(props) {} render() { return <div><CatComponent age="4" /></div> } } // Functional component function CatsComponent() { return <div><CatComponent age="4" /></div> } |
We’ll definitely see undefined rendering in place of props not sent by the parent component
.
For some reason, we might decide not to pass some props but whatever reason might be the reason we wouldn’t want to see the unknown in our app !! thanks! Our users will probably suspect that our application is malfunctioning.
The Solution – defaultProps
To solve this problem, we can use the logical operator || to set the fallback value, so when a support is missing, it will show the fallback value in place of the missing support.
1 2 3 4 5 6 7 8 9 10 11 12 | // ES6 class class CatComponent extends React.Component { constructor(props) {} render() { return <div>{this.props.catName || "Sandy"} Cat, Eye Color: {this.props.eyeColor || "deepblue" }, Age: {this.props.age || "120"}</div> } } // Functional component function CatComponent(props) { return <div>{props.catName || "Sandy"} Cat, Eye Color: {props.eyeColor || "deepblue"}, Age: {props.age || "120"}</div> } |
See that catName will display “Sandy” when it’s not placed in the props argument. Also eyeColor will display “deepblue” and age will display “120”. This works fine but we won’t attach || for all of our code. React provides a better way and it is done once, ladies and gentlemen, let me introduce defaultProps to you. defaultProps is a property in the React component
is used to set the default value for the props argument. It will be changed if the prop property is passed.
defaultProps can be defined as a property on the
component
class itself, to set the default props for the class. – React Blog
ES6 React Component
Using ES6 class, we will define a static property named defaultProps.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | class ReactComp extends React.Component {} ReactComp.defaultProps = {} // Our CatComponent // ES6 class class CatComponent extends React.Component { constructor(props) {} render() { return <div>{this.props.catName} Cat, Eye Color: {this.props.eyeColor }, Age: {this.props.age}</div> } } CatComponent.defaultProps = { catName: "Sandy", eyeColor: "deepblue", age: "120" } |
You see all || no more, making our code look cleaner and more professional.
We have defined a static property, defaultProps on the CatComponent class with the values we want the props to be sometimes not passed.
Functional Component
In React, we can use functions as component
to render the views. As for its ES6 component
, we can add default props to the component
by adding the static defaultProps property to the function:
1 2 3 4 5 6 7 8 9 10 11 12 13 | function Reactcomp(props) {} ReactComp.defaultProps = {} // CatComponent // Functional component function CatComponent(props) { return <div>{props.catName} Cat, Eye Color: {props.eyeColor}, Age: {props.age}</div> } CatComponent.defaultProps = { catName: "Sandy", eyeColor: "deepblue", age: "120" } |
Conclusion
So we’ve seen how to set the default value to the props argument in React components
, be it ES6 or functinal component
.