How would you use validation on props?

In React, props are used to pass data from a parent component to a child component. It is important to validate the data being passed to ensure that the child component receives the correct data type and format. This can be achieved using PropTypes, a built-in feature in React.

PropTypes is a library that allows you to specify the data type and format of the props being passed to a component. It provides a way to validate the props and throw an error if the data type or format is incorrect. For example, if you are passing a string to a component that expects a number, PropTypes will throw an error.

To use PropTypes, you need to import it from the 'prop-types' library and define the propTypes object in your component. The propTypes object should contain the name of the prop and its data type. For example, if you are passing a string to a component, you would define the propTypes object as follows:

import PropTypes from 'prop-types';

function MyComponent(props) {
  return (
    <div>
      <p>{props.myStringProp}</p>
    </div>
  );
}

MyComponent.propTypes = {
  myStringProp: PropTypes.string
};

In the above example, we are passing a string to the MyComponent component. We have defined the propTypes object to ensure that the myStringProp prop is of type string. If we pass a prop of a different data type, PropTypes will throw an error.