A complete guide to default props in React

This tutorial explains how to use default props in react application. A React component is simply a JavaScript function that takes an object of arbitrary inputs known as props and returns React elements describing what should be rendered on the UI. Similarly in this example we are using static property of ES6 class that will pass static object parameter as props in react application.

For a React component created using the ES6 class syntax, you can set default props by adding a static property named defaultProps to the component class.

NOTE :

1. The defaultProps static property should be set to an object representing the default props for the component.
2. you can define defaultProps on the component class itself, outside of the class body.
3. when you are using static keyword with defaultProps, then you should define static default props inside the class.

Class components

In this example, we are defining the defaultProps  on component class using ES6 class. Lets see the below  example.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  render() {
    // ...implement render method
    return (
      <div>
        <h1> Static default props value </h1>
        {this.props.one}
        <br />
        {this.props.two}
        <br />
        {this.props.three}
        <br />
      </div>
    );
  }
}

// Set default props
App.defaultProps = {
  one: "welcome",
  two: "to",
  three: "skptricks"
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Output:
-------------------

In this example, we are defining defaultProps with static keyword with ES6 class.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  // Set default props
  static defaultProps = {
    one: "welcome",
    two: "to",
    three: "skptricks"
  };

  render() {
    // ...implement render method
    return (
      <div>
        <h1> Static defaultProps value </h1>
        {this.props.one}
        <br />
        {this.props.two}
        <br />
        {this.props.three}
        <br />
      </div>
    );
  }
}

const rootElement = document.getElementById("r

Output:
--------------------------

Functional components

Similarly, we can use defaultProps in functional components as well. Lets see the below example, which provides you complete understanding how to use defaultProps in functional components.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App(props) {
  // ...implement render method
  return (
    <div>
      <h1> Static defaultProps value </h1>
      {props.one}
      <br />
      {props.two}
      <br />
      {props.three}
      <br />
    </div>
  );
}

// Set default props
App.defaultProps = {
  one: "welcome",
  two: "to",
  three: "skptricks"
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Output:
---------------------

This is all about default props example in react application.Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.