How to set component default props on React component

When working with React components, it is often necessary to provide default values for props. This ensures that the component behaves as expected even if certain props are not explicitly passed during its usage. In this blog post, we will explore different ways to set default props on a React component.

1. Using defaultProps

The easiest way to set default props in a React component is by using the defaultProps property. This property allows you to define default values for props directly within the component’s class definition.


import React from 'react';

class MyComponent extends React.Component {
  static defaultProps = {
    prop1: 'default value 1',
    prop2: 'default value 2',
  };

  render() {
    return (
      
        Prop 1: {this.props.prop1}
        Prop 2: {this.props.prop2}
      
    );
  }
}

export default MyComponent;

In the above example, we have defined default values for prop1 and prop2 using the defaultProps property. If these props are not provided when using the MyComponent component, the default values will be used instead.

2. Using the logical OR operator

Another way to set default props is by using the logical OR (||) operator within the component’s render method. This approach allows you to set default values inline, without modifying the component’s class definition.


import React from 'react';

class MyComponent extends React.Component {
  render() {
    const prop1 = this.props.prop1 || 'default value 1';
    const prop2 = this.props.prop2 || 'default value 2';

    return (
      
        Prop 1: {prop1}
        Prop 2: {prop2}
      
    );
  }
}

export default MyComponent;

In the above example, we use the logical OR operator to assign default values to prop1 and prop2 if they are falsy (e.g., undefined or null).

3. Using a higher-order component (HOC)

If you want to set default props for multiple components, you can use a higher-order component (HOC) to wrap your components and provide the default props. This approach allows you to reuse the default props logic across multiple components.


import React from 'react';

const withDefaultProps = (WrappedComponent, defaultProps) => {
  return class extends React.Component {
    render() {
      const props = {
        ...defaultProps,
        ...this.props,
      };

      return ;
    }
  };
};

const MyComponent = (props) => {
  return (
    
      Prop 1: {props.prop1}
      Prop 2: {props.prop2}
    
  );
};

const defaultProps = {
  prop1: 'default value 1',
  prop2: 'default value 2',
};

export default withDefaultProps(MyComponent, defaultProps);

In the above example, we define a higher-order component called withDefaultProps that takes a component and default props as arguments. It returns a new component that merges the default props with any props passed to it. We then wrap our MyComponent component with withDefaultProps and provide the default props.

These are three different approaches to set default props on a React component. Choose the one that best fits your use case and coding style. Default props are a powerful feature of React that help make your components more flexible and robust.

How to set component default props on React component