Defaults Props in React Js

Last Updated: March 29, 2020

You can assign default values for properties of your components. When you do not supply prop values externally to the component default values are applied

import React from "react";

export class Setting extends React.Component {
  render() {
    return (
      <div>
        <ul>
          <li>{this.props.title}</li>
        </ul>

        <table>
          <tr>
            <td> Currency </td>
            <td> {this.props.currency} </td>
          </tr>
          <tr>
            <td> Rows Per Page </td>
            <td> {this.props.rowsperpage} </td>
          </tr>
        </table>
      </div>
    );
  }
}

Setting.defaultProps = {
  rowsperpage: 20,
  currency: "USD"
};
export default Setting;

You can Setting.defaultProps object is used to define the default properties.

defaultProps is declared outside of the class or we call them instance of the class

This is your App.js file

import React from "react";

import Setting from "./Setting";

export default function App() {
  return (
    <div>
     
      <Setting currency="AUD" />
    </div>
  );
}