Using defaultProps in React
In React, defaultProps can be used to set default values for the props in a component. They are used when no value or undefined is supplied for a prop.
Here's a basic example of how to use defaultProps:
class MyComponent extends React.Component {
render() {
return <h1>{this.props.message}</h1>;
}
}
MyComponent.defaultProps = {
message: 'Hello, World!'
};
In this example, if message prop is not provided while using MyComponent, it will default to 'Hello, World!'.
ReactDOM.render(<MyComponent />, document.getElementById('root'));
The rendered HTML will be <h1>Hello, World!</h1> as 'Hello, World!' is the default value set for the message prop.
Remember, defaultProps are defined as a property on the component class itself, after the class declaration and using the same name as the component.
This feature is particularly useful in avoiding potential bugs due to undefined props and it improves code readability by providing an overview of the expected props.
Explore more articles
Keep experimenting and happy coding! You can find me at @samuellawrentz on X.