How to perform type checking using prop-types in React?

Question

How to perform type checking using prop-types in React?

Answer

Install the prop-types package and define types on your component props.

npm install prop-types

import PropTypes from 'prop-types';

function UserCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Age: {age}</p>
    </div>
  );
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

✅ If the prop type is incorrect or missing, React warns you in the console.

Real-World Example

• Validating data in reusable components
• Avoiding silent runtime bugs
• Early catching of integration issues

Quick Practice

Add PropTypes.arrayOf(PropTypes.object) validation to a List component that accepts an array of items.

Summary

PropTypes help catch invalid props at runtime — useful for development and shared UI components.