Props are used to pass data from a parent component to a child component in React. Defining the expected data types for props using prop types helps to catch errors early in development and ensures that the component is used correctly.

Use prop types to define the expected data types for props. Props are used to pass data from a parent component to a child component in React. Defining the expected data types for props using prop types helps to catch errors early in development and makes the code more maintainable.

Prop types are defined using the PropTypes library, which is included in React. The PropTypes library provides a set of validators for common data types such as strings, numbers, and arrays. Prop types can also be defined for custom data types such as objects or functions.

Here is an example of how to define prop types for a functional component that receives a string and a number as props:

import PropTypes from 'prop-types';

function MyComponent(props) {
  return (
    <div>
      <p>{props.name} is {props.age} years old.</p>
    </div>
  );
}

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

In the above example, we define the expected data types for the name and age props using PropTypes.string and PropTypes.number, respectively. The isRequired property is used to indicate that the prop is mandatory. If a prop of the wrong data type is passed to the component, a warning will be displayed in the console.

Here is an example of how to define prop types for a class component that expects a string and a number as props:

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

class MyComponent extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired
  };

  render() {
    const { name, age } = this.props;
    return (
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
      </div>
    );
  }
}

In the above example, the prop types for the name and age props are defined using PropTypes.string and PropTypes.number, respectively. The isRequired property is used to specify that both props are required. If a component that uses MyComponent does not pass in a name or age prop, a warning will be displayed in the console.