FrontEnd web
Published in

FrontEnd web

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

ReactJs

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

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

  1. 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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/