PropTypes in React

PropTypes are a way to document and enforce the types of props passed to components. They help catch bugs early by specifying the expected data types of props. PropTypes are particularly useful in large projects where multiple developers are involved, as they provide a clear contract for how components should be used.

import React from 'react';
import PropTypes from 'prop-types';

function ComponentA(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
      <ul>
        {props.items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={props.onClick}>{props.buttonText}</button>
    </div>
  );
}

ComponentA.propTypes = {
  title: PropTypes.string.isRequired, // string
  description: PropTypes.node, // node (string, number, element, array, etc.)
  items: PropTypes.arrayOf(PropTypes.string).isRequired, // array of strings
  onClick: PropTypes.func.isRequired, // function
  buttonText: PropTypes.string // string (optional)
};

export default ComponentA;

In this component:

title is a required string. description can be any node (string, number, element, array, etc.). items is an array of strings and is required. onClick is a required function. buttonText is an optional string. These PropTypes cover various data types commonly used in React components. You can adjust them based on your specific needs.

React component with PropTypes for different data types:

Understanding PropTypes in React: Ensuring Data Integrity and Component Consistency