Understanding Prop Types in React - Day 1 of 30 Days of React Tips and Tricks

Welcome to Day 1 of my 30 Days of React Tips and Tricks series! Today, I am going to talk about something that I found as one of the most important aspects of building React applications - Prop Types. In React, PropTypes is a tool that allows one to validate the props passed to a component. It helps one catch errors early and make the code more robust. It was helpful in avoiding undefined errors and more such errors that can happen during the running of the application. In this article, I'll cover the basics of PropTypes and show how one can use it in their React applications.

What are Prop Types?
PropTypes is a feature in React that allows one to define the types of props that a component expects. It provides a way to validate that the props passed to a component meet the expected requirements. PropTypes is especially useful in large projects where components can have many props and it can be difficult to keep track of them all.

How to Use Prop Types
One can write their own Prop Types in typescript and will not need to download the library. Here, I am showing how someone not familiar with typescript can include Prop Types in their project.
PropTypes is a separate package that one can install in their project. One can install it by running the following command:

npm install prop-types

Once installed, we can import it into our component and define the prop types that we expect. Here's an example:

import PropTypes from 'prop-types';

function MyComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.text}</p>
    </div>
  );
}

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

In this example, we've imported PropTypes and defined the propTypes for our MyComponent. We expect the title and text props to be strings and we've added the isRequired flag to ensure that they are always passed to the component.

Types of Prop Types:
PropTypes supports a range of types that one can use to define the expected props. Here are some examples:

PropTypes.string - expects a string value
PropTypes.number - expects a numeric value
PropTypes.bool - expects a boolean value
PropTypes.func - expects a function
PropTypes.object - expects an object
PropTypes.array - expects an array

We can also define custom Prop Types for more complex scenarios. Here's an example:

import PropTypes from 'prop-types';

function Person(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>Age: {props.age}</p>
    </div>
  );
}

Person.propTypes = {
  name: PropTypes.string.isRequired,
  age: function(props, propName, componentName) {
    if (props[propName] < 18) {
      return new Error(
        `Invalid prop ${propName} supplied to ${componentName}. ${propName} must be greater than or equal to 18.`
      );
    }
  }
};

In this example, we've defined a custom prop type for the age prop. We're checking that the age is greater than or equal to 18 and returning an error if it's not.

Conclusion:
Prop Types are a helpful tool for building React applications. They allow us to validate the props passed to a component and catch errors early. By using PropTypes, one can make their code more robust and maintainable. In this article, I covered the basics of PropTypes, showed you how to use it in your React applications, and even defined a custom prop type. Stay tuned for Day 2 of our 30 Days of React Tips and Tricks series!

Do comment on how can I improve my future posts.