In React, prop validation is used to ensure that components receive props of the expected type and shape. This helps catch bugs early by throwing warnings in development if props are missing or invalid.

React provides a built-in library called prop-types for validating props.

Step-by-Step: How to Apply Validation on Props

Install prop-types Package

If you’re using React v15.5 or later, you need to install prop-types separately:

npm install prop-types

Import PropTypes

import PropTypes from 'prop-types';

Define PropTypes for Your Component

You attach a static propTypes property to your functional or class component:

function Greeting({ name, age }) {
  return (
    <p>
      Hello, {name}! You are {age} years old.
    </p>
  );
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired, // Required string
  age: PropTypes.number               // Optional number
};

Common Prop Type Validators

Validator Type	Example	Description
PropTypes.string	name: PropTypes.string	A string prop
PropTypes.number	age: PropTypes.number	A number prop
PropTypes.bool	isAdmin: PropTypes.bool	A boolean prop
PropTypes.func	onClick: PropTypes.func	A function prop
PropTypes.array	items: PropTypes.array	An array of any type
PropTypes.object	data: PropTypes.object	A plain object
PropTypes.node	children: PropTypes.node	Anything that can be rendered (string, JSX)
PropTypes.element	header: PropTypes.element	A React element
PropTypes.any	value: PropTypes.any	Any type (not recommended often)

Complex Prop Validation

Arrays of a Specific Type

numbers: PropTypes.arrayOf(PropTypes.number)

Objects with a Specific Shape

user: PropTypes.shape({
  id: PropTypes.number.isRequired,
  name: PropTypes.string
})

Enums (One Of Allowed Values)

status: PropTypes.oneOf(['pending', 'approved', 'rejected'])

One Of Type (Union Types)

value: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
])

Required Props

Use .isRequired to make a prop mandatory:

Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

If name is not provided, React will warn you in the console during development.

Default Props (Optional)

You can also define default values for props using defaultProps:

Greeting.defaultProps = {
  age: 30
};

If no age is passed, it defaults to 30.

Notes

• Prop validation only works in development mode — not in production.
• It’s a great way to document your component API and help with team collaboration.
• For large apps or stricter typing, consider TypeScript instead of PropTypes.

Example: Validating Props with prop-types

// App.js
import React from 'react';
import PropTypes from 'prop-types';

function Greeting({ name, age }) {
  return (
    <div>
      <h2>Hello, {name}!</h2>
      <p>You are {age} years old.</p>
    </div>
  );
}

// Prop validation
Greeting.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

// Default prop (in case age is not passed)
Greeting.defaultProps = {
  age: 25
};

function App() {
  return (
    <div>
      {/* This is valid and will show "Hello, Alice!" */}
      <Greeting name="Alice" />

      {/* This will cause a warning because 'name' is required */}
      <Greeting />
    </div>
  );
}

export default App;