ReactJs

What is defaultProps in reactjs, and How do you use it?

Handling default Props in reactjs

defaultProps is a unique way to handle props in reactjs and a time saver. I recently found it, and when I start using it. I would never be imagined it would be so helpful to me.

All the code is available on GitHub and checks a live demo.

What is defaultProps?

According to react docs defaultProps can be defined as a property on the component class itself to set the default props for the class. This is used for undefined props but not for null props.

In simple words, defaultProps is a component property that allows you to set default values for the props, and defaultProps is accessed with props.

The defaultProps work fine with class and function components. If the parent component passes the prop property, it will be changed. Otherwise, it uses a defaultProps value.

For example

Function Component

// function compo
export default function Card(props) {
  return (
     
  );
}

Card.defaultProps = {
  color: "#dfa7ff"
};

2. Class Component

import React, { Component } from "react";

class Card extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (

    );
  }
}


Card.defaultProps = {
  color: "#ff8cc7"
};


export default Card;

How do you use it?

You can easily use defaultProps with function and class base components and do not need any configuration.

I can show you one real-life working example for defaultProp in reactjs. I can add color default props in react component.

Example 1

import React, { Component } from "react";

class Card extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div
        style={{ backgroundColor: this.props.color }}
        className="blog-container"
      >
      </div>
    );
  }
}

Card.defaultProps = {
  color: "#ff8cc7"
};

export default Card;

Example 2

export default function Card(props) {
  return (
    <div style={{ backgroundColor: props.color }} className="blog-container">
       {/* Rest code here */}
    </div>
  );
}
Card.defaultProps = {
  color: "#dfa7ff"
};

Conclusion

You can handle so many things with defaultProps which you never imagined it. You can define default props for components, and sometimes, if you forget to pass props. It will help full not to break a website in production.

You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the officialrajdeepsingh. dev, Nextjs, frontend web, and Sign up for a free newsletter.