In React, validating props ensures that the components receive the correct type of data. This improves code quality, makes debugging easier, and provides documentation for other developers. One popular way to validate props is by using the PropTypes library.

What is PropTypes?

PropTypes is a library that allows you to specify the expected types and requirements for each prop a component receives. React will issue warnings in the console if the props don't match the specified types.

Note: PropTypes is not included in React core anymore. You need to install it separately using:

npm install prop-types

or

yarn add prop-types

How to Use PropTypes

Here’s a step-by-step guide:

1. Import PropTypes:

import PropTypes from 'prop-types';

2. Define PropTypes for Your Component: You can define prop types by adding a propTypes object to your component.

function UserProfile({ name, age, isActive }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
      <p>Status: {isActive ? 'Active' : 'Inactive'}</p>
    </div>
  );
}

UserProfile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  isActive: PropTypes.bool,
};

• PropTypes.string → The prop should be a string.
• PropTypes.number → The prop should be a number.
• PropTypes.bool → The prop should be a boolean.
• Adding .isRequired ensures the prop must be provided.

Commonly Used PropTypes

PropType	Description
PropTypes.string	A string
PropTypes.number	A number
PropTypes.bool	A boolean
PropTypes.array	An array
PropTypes.object	An object
PropTypes.func	A function
PropTypes.node	Anything that can be rendered (numbers, strings, JSX)
PropTypes.element	A React element
PropTypes.oneOf(['News', 'Photos'])	One of a specific set of values
PropTypes.arrayOf(PropTypes.number)	An array of numbers
PropTypes.objectOf(PropTypes.string)	An object with string values
PropTypes.shape({ name: PropTypes.string, age: PropTypes.number })	An object with a particular shape
PropTypes.any	Any data type

Example with Advanced PropTypes

function Product({ product }) {
  return (
    <div>
      <h2>{product.name}</h2>
      <p>Price: ${product.price}</p>
    </div>
  );
}

Product.propTypes = {
  product: PropTypes.shape({
    name: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired,
    inStock: PropTypes.bool,
  }).isRequired,
};

Why Use PropTypes?

• Catch bugs early during development.
• Self-documenting your component’s expected props.
• Better collaboration with other developers.
• Helps during refactoring by highlighting invalid usages.

---