How to apply validation on props in React?

When the application is running in _development mode_, React will automatically check all props that we set on components to make sure they have _correct type_. If the type is incorrect, React will generate warning messages in the console. It's disabled in _production mode_ due to performance impact. The mandatory props are defined with isRequired.

The set of predefined prop types:

1. PropTypes.number
2. PropTypes.string
3. PropTypes.array
4. PropTypes.object
5. PropTypes.func
6. PropTypes.node
7. PropTypes.element
8. PropTypes.bool
9. PropTypes.symbol
10. PropTypes.any

We can define propTypes for User component as below:

```jsx harmony
import React from "react";
import PropTypes from "prop-types";

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

render() {
return (
<>
<h1>{Welcome, ${this.props.name}}</h1>
<h2>{Age, ${this.props.age}}</h2>
</>
);
}
}

    **Note:** In React v15.5 _PropTypes_ were moved from `React.PropTypes` to `prop-types` library.
    
    **Modern Recommendation:** While PropTypes are still supported, **TypeScript** is now the industry standard for type checking in React applications. Consider using TypeScript for better type safety, IDE support, and compile-time error detection.

    _The Equivalent Functional Component_

    

function User({ name, age }) {
return (
<>
<h1>{Welcome, ${name}}</h1>
<h2>{Age, ${age}}</h2>
</>
);
}

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

    
    _Modern TypeScript Version_

    

interface UserProps {
name: string;
age: number;
}

function User({ name, age }: UserProps) {
return (
<>
<h1>{Welcome, ${name}}</h1>
<h2>{Age, ${age}}</h2>
</>
);
}
```