Check out Amazon Advertising for Humans. Now publicly available 🚀

React: Default Props



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>

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.
portfolios page sunburst chart