Understanding React Default Props

Tram Ho

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


As above, React components take input in the props argument

This is passed down from the parent component

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:

And if

The props argument will be:

Child component will access them from the props object with the name of the property acting as the key:

The problem here is what happens if the parent component doesn’t pass any properties to the child component ?

Or the parent component does not pass all the properties that the child component displays.

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.

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.

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:


So we’ve seen how to set the default value to the props argument in React components , be it ES6 or functinal component .

Share the news now

Source : Viblo