How to set default props in React

Props in React are like function arguments. You can use props to send data to a component.

Like default values for function arguments, props also have default values.

defaultProps can be defined as a property on the component class itself to set the default props for the class.

defaultProps is used for undefined props, not for null props.

Code

For example, let’s create a CustomButton class in React that takes color as a prop.

To set a default value for the color prop, use the defaultProps property of CustomButton to set the default value of color to blue.

Notice that whenever you don’t pass the color prop to CustomButton, it will fall back to the blue default prop value.

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';


ReactDOM.render(
  <App />, 
  document.getElementById('root')
);
Copyright ©2024 Educative, Inc. All rights reserved