{"id":229695,"date":"2024-04-26T12:56:01","date_gmt":"2024-04-26T12:56:01","guid":{"rendered":"https:\/\/namso-gen.co\/blog\/?p=229695"},"modified":"2024-04-26T12:56:01","modified_gmt":"2024-04-26T12:56:01","slug":"how-to-set-default-props-value-in-react","status":"publish","type":"post","link":"https:\/\/namso-gen.co\/blog\/how-to-set-default-props-value-in-react\/","title":{"rendered":"How to set default props value in React?"},"content":{"rendered":"

In React, default props provide a way to specify default values for props that are not explicitly provided by the parent component. This helps to ensure that the component behaves as expected, even when certain props are missing. Here’s how you can set default props values in React:<\/p>\n

1. Begin by defining the component and its propTypes using the PropTypes library from the ‘prop-types’ package.
\n2. Inside the component, declare a static property called ‘defaultProps’.
\n3. Assign an object to ‘defaultProps’ where the keys represent the prop names and the values represent their default values.<\/p>\n

For example, let’s say we have a simple “Button” component that accepts a “label” prop. If the “label” prop is not provided, we want to display a default label of “Click me”. Here’s how we can achieve this:<\/p>\n

“`javascript
\nimport React from ‘react’;
\nimport PropTypes from ‘prop-types’;<\/p>\n

const Button = ({ label }) =>