React JS PropTypes with Class Component

PropTypes is a library in React used to validate the props that are passed to a component. Props (short for properties) are used to pass data from one component to another in React. PropTypes help ensure that the components receive the props they expect, which can help catch bugs and make the code more readable and maintainable.

How can we use PropTypes with Class Component?

To use PropTypes with class components in React, you can define a static property called 'propTypes' on your class component. Here's how you can do it:

1. First, install the 'prop-types' package if you haven't already:

npm install prop-types

2. Import PropTypes in your class component file:

import PropTypes from 'prop-types';

3. Define the 'propTypes' static property on your class component and specify the expected types for each prop:

   import React, { Component } from 'react';
   import PropTypes from 'prop-types';

   class MyComponent extends Component {
     render() {
       return <div>{this.props.message}</div>;
     }
   }

   MyComponent.propTypes = {
     message: PropTypes.string.isRequired,
   };

In this example, we're using PropTypes to specify that the 'message' prop should be a string and is required ('isRequired'). PropTypes will issue a warning in the console if the expected prop types are not provided or do not match the specified types.

Look at another example:

function MyComponent({ name, age, isActive }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
      <p>{isActive ? "Active" : "Inactive"}</p>
    </div>
  );
}

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

MyComponent.defaultProps = {
  isActive: false,
}; 

Explanation:

• PropTypes.string.isRequired: This means the name prop should be a string and is required.
• PropTypes.number.isRequired: This means the age prop should be a number and is required.
• PropTypes.bool: This means the isActive prop should be a boolean and is optional.
• defaultProps: This provides default values for props that are not passed by the parent component.

Common PropTypes Validators:

1. PropTypes.any: The prop can be of any data type.
2. PropTypes.bool: The prop should be a boolean.
3. PropTypes.number: The prop should be a number.
4. PropTypes.string: The prop should be a string.
5. PropTypes.func: The prop should be a function.
6. PropTypes.array: The prop should be an array.
7. PropTypes.object: The prop should be an object.
8. PropTypes.node: The prop can be any renderable node.
9. PropTypes.element: The prop should be a React element.
10. PropTypes.instanceOf: The prop should be an instance of a particular class.
11. PropTypes.oneOf: The prop should be one of the specified values.
12. PropTypes.oneOfType: The prop should be one of the specified types.
13. PropTypes.arrayOf: The prop should be an array of a certain type.
14. PropTypes.objectOf: The prop should be an object with property values of a certain type.
15. PropTypes.shape: The prop should be an object with a specific shape.
16. PropTypes.exact: The prop should be an object with an exact shape.
17. Using PropTypes is a good practice to ensure the robustness and reliability of your React components, especially as your application grows in complexity.

You can specify PropTypes for all types of props, including strings, numbers, booleans, arrays, objects, functions, and even custom shapes or instances of specific classes. PropTypes provide a way to catch errors early and ensure that components receive the correct props, helping you build more robust and maintainable React applications.

TypeScript

In React, PropTypes is used to validate component properties (props). But we can also use TypeScript for this. Both methods allow you to specify the expected types and, optionally, whether the props are required or have default values.

Now, we look at TypeScript to validate component properties (props):
1. Define an interface for your props:

interface MyComponentProps {
   name: string;
   age?: number;
   isAdmin?: boolean;
}

2. Create your component and specify the props using the defined interface:

const MyComponent: React.FC<MyComponentProps> = (props) => {
return <div>{props.name}</div>;
};

3. TypeScript will automatically check that the props passed to `MyComponent` match the defined interface.

Difference:

Both PropTypes and TypeScript provide a way to catch errors early and ensure that the components in your application receive the correct props. PropTypes is a runtime validation tool, while TypeScript is a static type checker that catches errors during development. Choose the one that best fits your project's requirements and preferences.