Check out bidbear.io Amazon Advertising for Humans. Now publicly available 🚀

React: Default Props

Contents

Intro

Because we want our components to be as re-usable as possible there will be times where we want to set a default value to props. For example if we have a spinner component that simply covers the whole page with a spinning icon.

loading icon

Default Props

We can pass in the message below the spinning icon very easily using a prop called message. However if we have not explicitly passed in a message to this component, instead of having it be blank we can have a set of default props using the .defaultProps method.

import React from "react";

const Loading = (props) => {
  return (
    <div class="ui segment centering-container">
      <div class="ui active dimmer">
        <div class="ui text loader">{props.message}</div>
      </div>
      <p></p>
    </div>
  );
};

Loading.defaultProps = {
  message: "Loading...",
};

export default Loading;

loading... message under icon

Amazon Ad Analytics For Humans

Advertising reports automatically saved and displayed beautifully for powerful insights.

bidbear.io
portfolios page sunburst chart