ReactJS PropTypes

React props, which stand for “properties”, pass data from one component to another. If a component receives the wrong type of props, it can lead to bugs and unexpected errors in your app.

Since JavaScript does not have a built-in type-checking solution, many developers use extensions such as TypeScript and Flow. However, React has an internal mechanism for props validation called prop types.

We pass different types of information, such as integers, strings, arrays, etc., as props to the components. We can either create default props or pass the props directly as attributes of the components. So, let’s recall how we passed these props to a component.

We passed props from outside a component and used them inside that component. But did we have to check what kind of values we are getting inside our component via props.

It is entirely up to us whether or not we validate the data we receive by using props inside a component. But it is always a good practice for large apps to validate the data we get through props. It will help in debugging and also help in avoiding bugs in the future.

Let us see how to do this.

PropTypes in React

Before React 15.5.0, proptypes are available in the React package, but in later versions of React, you need to add a dependency to your project. You can add a dependency to your project using the below command:

We can use propType to validate any data we get from the prop. But before using it, we have to import it. Add the following line to the top of your index.js file:

Once we have imported propTypes, we are ready to work with them. Like default props, propTypes are also objects where keys are the prop names and values are their types.

Below syntax shows how to use propTypes:

  ComponentClassName.propTypes{         propName1 : PropTypes.string,      propName2 : PropTypes.bool,      propName3 : PropTypes.array,      .      .      .      .      propNamen : PropTypes.anyOtherType  }  

In the above syntax, componentClassName is the name of the component class; Any other type can be any type we are allowed to pass as prop.

A warning will appear on the console for props that do not validate the type of data specified by propTypes. Let’s look at a complete program that uses proptypes for validation for a better understanding:

Javascript

  import PropTypes from ‘prop-types’;  import React from ‘react’;  import ReactDOM from ‘react-dom’;  // Component  class ComponentExample extends React.Component{      render(){          return(                  <div>                       {/* printing all props */}                      <h1>                          {this.props.arrayProp}                          <br />                             {this.props.stringProp}                          <br />                             {this.props.numberProp}                          <br />                             {this.props.boolProp}                          <br />                      </h1>                  </div>              );      }  }   // Validating prop types  ComponentExample.propTypes = {      arrayProp: PropTypes.array,      stringProp: PropTypes.string,      numberProp: PropTypes.number,      boolProp: PropTypes.bool,  }  // Creating default props  ComponentExample.defaultProps = {      arrayProp: [‘Denail’, ‘Sairin’, ‘Rompol’],      stringProp: “tutoraspire”,      numberProp: “10”,      boolProp: true,  }  ReactDOM.render(      <ComponentExample  />,      document.getElementById(“root”)  );  

Output:

ReactJS PropTypes

You can see in the above program that we are passing the prop named NumberProp as a string but validating it as a number. You can visit the official documentation of ReactJS to see all the valid types that can take a prop.

Still, everything is rendered perfectly on the browser, but there is a warning message in our browser console. This message tells us that the prop named NumberProp was expected to contain a numeric value, but instead, a string value is passed.

Do React props work?

When you call that component, react props allow you to send data – including numbers, strings, functions, objects, arrays, etc. If you have multiple components, you can pass data from one component to another.

To pass props between components, you would add them when you call the component, just as you would pass arguments when calling a regular JavaScript function.

Why validate props in React?

While developing a React application, you may face the need to structure and define a prop to avoid bugs and errors. Like a function can have mandatory arguments, a react component can require a prop to be defined. Otherwise, it will not render properly.

If you forget to pass a required prop to a component that needs it, it can cause your app to behave unexpectedly.

Consider the following code.

  import React from ‘react’;  import ReactDOM from ‘react-dom’;    function PercentageStat({ label, score = 0, total = Math.max(1, score) }) {    return (      <div>        <h6>{ label }</h6>        <span>{ Math.round(score / total * 100) }%</span>      </div>    )  }    function App() {    return (      <div>        <h1>Male Population</h1>        <div>          <PercentageStat label=”Class 1″ total={360} score={203} />          <PercentageStat label=”Class 2″ total={206} />          <PercentageStat label=”Class 3″ score={107} />          <PercentageStat label=”Class 4″ />        </div>      </div>    )  }    const rootElement = document.getElementById(‘root’);  ReactDOM.render(<App />, rootElement);  

In the above snippet, the component named PercentageStat requires three props for proper rendering: label, score, and total. Default values are set for Score and Total props if they are not provided. The app component renders the percentage position four times, each with different props.

Below is what the app would look like (with some Bootstrap styling):

ReactJS PropTypes

Note that, depending on usage, the label prop is expected to be a string. In the same way, marks and total need to be numerical values as they are used to calculate the percentage. Also, the total is never expected to be 0 because it is being used as the divisor.Below is another code snippet showing a modified app that renders the PercentState components with invalid props.

  function App() {    return (      <div>        <h1>Male Population</h1>        <div>          <PercentageStat label=”Class 1″ total=”0″ score={203} />          <PercentageStat label=”Class 2″ total={0} />          <PercentageStat label=”Class 3″ score={f => f} />          <PercentageStat label=”Class 4″ total={{}} score=”0″ />        </div>      </div>    )  }  

The app view now looks like this:

ReactJS PropTypes

Using PropTypes in React

PropTypes is React’s internal mechanism for adding type checking to components.

React components use a special property named prop Types to set up type checking.

  /**   * FUNCTIONAL COMPONENTS   */  function ReactComponent(props) {    // …implement render logic here  }    ReactComponent.propTypes = {    // …prop type definitions here  }      /**   * CLASS COMPONENTS: METHOD 1   */  class ReactComponent extends React.Component {    // …component class body here  }    ReactComponent.propTypes = {    // …prop type definitions here  }      /**   * CLASS COMPONENTS: METHOD 2   * Using the `static` class properties syntax   */  class ReactComponent extends React.Component {    // …component class body here        static propTypes = {      // …prop type definitions here    }  }  

When props are passed to a React component, they are checked against the type definition configured in the propTypes property. When an invalid value is passed to a prop, a warning is displayed on the JavaScript console.

ReactJS PropTypes

If default props are set for the React component, the value is resolved first before checking against prop types. Therefore, default values are also subject to prop type definitions.

Note that PropTypes type checking happens in development mode, so you can catch bugs in your React application while you’re developing. For performance reasons, it is not triggered in a production environment.

Using the prop-types library in React

Before React 15.5.0, a utility called proptypes was available as part of the React package, which provided several validators for configuring type definitions for component props. It can be accessed with React.PropTypes.

However, in later versions of React, this utility has been moved to a separate package called prop-types, so you will need to add it as a dependency to your project to access the proptypes utility.

It can be imported into your project files as follows:

import propType from ‘prop-type’;

React PropTypes validator

The PropTypes utility exports a wide range of validators for configuring type definitions. Below we’ll list the validators available for basic, renderable, instance, multiple, collection, and required prop types.

Basic types

Below are the validators for the basic data types.

PropTypes.any: Prop can be of any data type
PropTypes.bool: prop must be a boolean
PropTypes.number: prop must be a number
PropTypes.string: prop must be a string
PropTypes.func: prop must be a function
PropTypes.array: prop must be an array
PropTypes.object: prop must be an object
PropTypes.symbol: prop must be a symbol

  Component.propTypes = {    anyProp: PropTypes.any,    booleanProp: PropTypes.bool,    numberProp: PropTypes.number,    stringProp: PropTypes.string,    functionProp: PropTypes.func  }  

Renderable types

PropTypes also exports the following validators to ensure that a value passed to a prop can be provided by React.

node: prop must be anything that can be represented by React – a number, string, element, or array (or slice) that contains thesetypes
element: prop must be a response element.

  Component.propTypes = {    nodeProp: PropTypes.node,    elementProp: PropTypes.element  }  

A common use of the PropTypes.element validator ensures that a component has only one child. If the component has no children or multiple children, an alert is displayed on the JavaScript console.

Instance types

In cases where you need a prop to be an instance of a particular JavaScript class, you can use the PropTypes.instanceOf validator. It takes advantage of the built-in JavaScript instance of the operator.

Multiple types

PropTypes also exports validators that can allow a limited number of values or multiple sets of data types for a prop. They are here:

oneOf: The prop is limited to a specified set of values, treating it likean enum
oneOfType: prop must be one of a set of specified types, which behaves like a union of types.

  Component.propTypes = {    enumProp: PropTypes.oneOf([true, false, 0, ‘Unknown’]),    unionProp: PropTypes.oneOfType([      PropType.bool,      PropType.number,      PropType.string,      PropType.instanceOf(Person)    ])      }  

Collection types

In addition to the PropTypes.array and PropTypes.object validators, PropTypes also provides validators for more sophisticated validation of arrays and objects.

PropTypes.arrayOf

PropTypes.arrayOf ensures that prop is an array with all items matching the specified type.

  Component.propTypes = {      peopleArrayProp: PropTypes.arrayOf(      PropTypes.instanceOf(Person)    ),        multipleArrayProp: PropTypes.arrayOf(      PropTypes.oneOfType([        PropType.number,        PropType.string      ])    )      }  

PropTypes.objectOf

PropTypes.objectOf ensures that a prop is an object where all property values match the specified type.

  Component.propTypes = {      booleanObjectProp: PropTypes.objectOf(      PropTypes.bool    ),        multipleObjectProp: PropTypes.objectOf(      PropTypes.oneOfType([        PropType.func,        PropType.number,        PropType.string,        PropType.instanceOf(Person)      ])    )      }  

PropTypes.shape

When more detailed validation of an object prop is needed, you can use PropTypes.shape. It ensures that a prop is an object containing a set of specified keys with values of the specified type.

  Component.propTypes = {    profileProp: PropTypes.shape({      id: PropTypes.number,      fullname: PropTypes.string,      gender: PropTypes.oneOf([‘M’, ‘F’]),      birthdate: PropTypes.instanceOf(Date),      isAuthor: PropTypes.bool    })  }  

PropTypes.exact

For strict (or exact) object matching, you can use PropTypes.exact as follows:

  Component.propTypes = {    subjectScoreProp: PropTypes.exact({      subject: PropTypes.oneOf([‘Maths’, ‘Arts’, ‘Science’]),      score: PropTypes.number    })  }  

Required types

The PropTypes validators we’ve explored allow the prop to be optional. However, you can chain isRequired to any prop validator to ensure a warning is shown whenever the prop is not provided.

  Component.propTypes = {    requiredAnyProp: PropTypes.any.isRequired,    requiredFunctionProp: PropTypes.func.isRequired,    requiredSingleElementProp: PropTypes.element.isRequired,    requiredPersonProp: PropTypes.instanceOf(Person).isRequired,    requiredEnumProp: PropTypes.oneOf([‘Read’, ‘Write’]).isRequired,        requiredShapeObjectProp: PropTypes.shape({      title: PropTypes.string.isRequired,      date: PropTypes.instanceOf(Date).isRequired,      isRecent: PropTypes.bool    }).isRequired  }  

Custom validators for type-checking React props.

Usually, it will help if you define some custom validation logic for component props – for example, ensuring that a prop is passed a valid email address. Prop-type allows you to define custom validation functions for type checking props.

Native custom validator

The custom validation function takes three arguments:

props, an object containing all props passed to the component
propname, the name of the prop to be validated
Component name, Component name

If the validation fails, it should return an error object. Shouldn’t throw error. Also, console.warn should not be used inside a custom validation function.

  const isEmail = function(props, propName, componentName) {    const regex = /^((([^<>()[].,;:s@”]+(.[^<>()[].,;:s@”]+)*)|(“.+”))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,})))?$/;        if (!regex.test(props[propName])) {      return new Error(`Invalid prop `${propName}` passed to `${componentName}`. Expected a valid email address.`);    }  }    Component.propTypes = {    email: isEmail,    fullname: PropTypes.string,    date: PropTypes.instanceOf(Date)  }  

ReactJS PropTypes

Custom validation functions can also be used with PropTypes.oneOfType. Here’s a simple example using the isEmail custom validation function in the previous code snippet:

  Component.propTypes = {    email: PropTypes.oneOfType([      isEmail,      PropTypes.shape({        address: isEmail      })    ])  }  

Component will be valid in both of these scenarios:

  <Component email=”glad@me.com” />  <Component email={{ address: ‘glad@me.com’ }} />  

Custom validators and collections

Custom validation functions can also be used with PropTypes.arrayOf and PropTypes.objectOf. When used this way, the custom validation function is called for each key in the array or object.

However, the custom validation function takes five arguments instead of three:

prop value, array, or object itself
the key, the key of the current item in the iteration
component name component name
location, location of valid data (usually “prop”)
propFullName, the fully resolved name of the current item being validated. It will be an array [index]; It would be an object to anything. key.

Below is a modified version of the isEmail custom validation function for use with archive types.

  const isEmail = function(propValue, key, componentName, location, propFullName) {    const regex = /^((([^<>()[].,;:s@”]+(.[^<>()[].,;:s@”]+)*)|(“.+”))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,})))?$/;        if (!regex.test(propValue[key])) {      return new Error(`Invalid prop `${propFullName}` passed to `${componentName}`. Expected a valid email address.`);    }  }  Component.propTypes = {    emails: PropTypes.arrayOf(isEmail)  }  

All-purpose custom validators

Considering what we learned about custom validation functions, let’s go ahead and create an all-purpose custom validator that can be used as a standalone validator and with collection types.

A slight modification to the isEmail custom validation function will make it an all-purpose validator, as shown below.

  const isEmail = function(propValue, key, componentName, location, propFullName) {    // Get the resolved prop name based on the validator usage    const prop = (location && propFullName) ? propFullName : key;        const regex = /^((([^<>()[].,;:s@”]+(.[^<>()[].,;:s@”]+)*)|(“.+”))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,})))?$/;        if (!regex.test(propValue[key])) {      return new Error(`Invalid prop `${prop}` passed to `${componentName}`. Expected a valid email address.`);    }  }    Component.propTypes = {    email: PropTypes.oneOfType([      isEmail,      PropTypes.shape({        address: isEmail      })    ]),    emails: PropTypes.arrayOf(isEmail)  }  

Validating Percentage Stat in React

The following code snippet adds prop types to the Percentage Stat component we reviewed at the beginning of this tutorial.

  import React from ‘react’;  import PropTypes from ‘prop-types’;    // The PercentageStat component  function PercentageStat({ label, score = 0, total = Math.max(1, score) }) {    return (      
<div>
<h6>{ label }</h6>
<p>        <span>{ Math.round(score / total * 100) }%</span>      </p></div>
<p>    )  }    // Checks if a value is numeric  // Either a finite number or a numeric string  function isNumeric(value) {    const regex = /^(+|-)?((d*.?d+)|(d+.?d*))$/;    return Number.isFinite(value) || ((typeof value === “string”) && regex.test(value));  }      // Checks if value is non-zero  // Value is first converted to a number  function isNonZero(value) {    return +value !== 0;  }  // Takes test functions as arguments and returns a custom validation function.  // Each function passed as argument is expected to take a value argument  // Expected to accept a value and return a boolean if it passes validation.  // All tests must pass for the custom validator to be marked as passed.  function validatedType(…validators) {    return function(props, propName, componentName) {          const value = props[propName];            const valid = validators.every(validator => {        if (typeof validator === “function”) {          const result = validator(value);          return (typeof result === “boolean”) && result;        }                return false;      });            if (!valid) {        return new Error(`Invalid prop `${propName}` passed to `${componentName}`. Validation failed.`);      }          }  }    // Set the propTypes for the component  PercentageStat.propTypes = {    label: PropTypes.string.isRequired,    score: validatedType(isNumeric),    total: validatedType(isNumeric, isNonZero)  }  </p>

Validate React component props in a production

Debugging a React application can be difficult, especially in a complex situation, if you are interested in monitoring and tracking redux status for all your users in production.

ReactJS PropTypes

LogRocket is like a DVR for web apps, recording everything that happens on your site. Instead of guessing why problems occur, you can consolidate and report the status of your application when problems occur.

The LogRocket Redux middleware package adds an extra layer of visibility to your user sessions. LogRocket logs all actions and states from your Redux store.

Type checking with PropTypes

React.PropTypes has moved into a separate package since React v15.5. Please use the prop-type library instead.

We provide a Codemod script to automate the conversion.

As your app grows, you can catch many bugs with type checking. You can use a JavaScript extension such as Flow or TypeScript to test certain applications to test your entire application.

But even if you don’t use them, React has some built-in type checking capabilities. To type check on props for a component, you can assign special propTypes properties:

  import PropTypes from ‘prop-types’;    class Greeting extends React.Component {    render() {      return (        <h1>Hello, {this.props.name}</h1>      );    }  }    Greeting.propTypes = {    name: PropTypes.string  };  

We’re using a class component in this example, but the same functionality can also be applied to function components or components created by React. PropTypes exports a series of validators that can be used to ensure that the data you receive is valid.

We’re using a class component in this example, but the same functionality can also be applied to function components or components created by React. Memo or response. forwarded.

PropTypes exports a series of validators that can be used to ensure that the data you receive is valid. In this example, we are using PropTypes.string. When an invalid value is supplied for a prop, a warning will be shown in the JavaScript console. For performance reasons, propTypes are only checked in development mode.

PropTypes

Here’s an example documenting the various validators provided:

  import PropTypes from ‘prop-types’;  MyComponent.propTypes = {    // You can declare that a prop is a specific JS type. By default, these    // are all optional.    optionalArray: PropTypes.array,    optionalBool: PropTypes.bool,    optionalFunc: PropTypes.func,    optionalNumber: PropTypes.number,    optionalObject: PropTypes.object,    optionalString: PropTypes.string,    optionalSymbol: PropTypes.symbol,      // Anything that can be rendered: numbers, strings, elements or an array    // (or fragment) containing these types.    optionalNode: PropTypes.node,      // A React element.    optionalElement: PropTypes.element,      // A React element type (ie. MyComponent).    optionalElementType: PropTypes.elementType,      // You can also declare that a prop is an instance of a class. This uses    // JS’s instanceof operator.    optionalMessage: PropTypes.instanceOf(Message),      // You can ensure that your prop is limited to specific values by treating    // it as an enum.    optionalEnum: PropTypes.oneOf([‘News’, ‘Photos’]),      // An object that could be one of many types    optionalUnion: PropTypes.oneOfType([      PropTypes.string,      PropTypes.number,      PropTypes.instanceOf(Message)    ]),      // An array of a certain type    optionalArrayOf: PropTypes.arrayOf(PropTypes.number),      // An object with property values of a certain type    optionalObjectOf: PropTypes.objectOf(PropTypes.number),      // An object taking on a particular shape    optionalObjectWithShape: PropTypes.shape({      color: PropTypes.string,      fontSize: PropTypes.number    }),      // An object with warnings on extra properties    optionalObjectWithStrictShape: PropTypes.exact({      name: PropTypes.string,      quantity: PropTypes.number    }),         // You can chain any of the above with `isRequired` to make sure a warning    // is shown if the prop isn’t provided.    requiredFunc: PropTypes.func.isRequired,      // A required value of any data type    requiredAny: PropTypes.any.isRequired,      // You can also specify a custom validator. It should return an Error    // object if the validation fails. Don’t `console.warn` or throw, as this    // won’t work inside `oneOfType`.    customProp: function(props, propName, componentName) {      if (!/matchme/.test(props[propName])) {        return new Error(          ‘Invalid prop `’ + propName + ‘` supplied to’ +          ‘ `’ + componentName + ‘`. Validation failed.’        );      }    },      // You can also supply a custom validator to `arrayOf` and `objectOf`.    // It should return an Error object if the validation fails. The validator    // will be called for each key in the array or object. The first two    // arguments of the validator are the array or object itself, and the    // current item’s key.    customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {      if (!/matchme/.test(propValue[key])) {        return new Error(          ‘Invalid prop `’ + propFullName + ‘` supplied to’ +          ‘ `’ + componentName + ‘`. Validation failed.’        );      }    })  };  

Requiring Single Child

With PropTypes.element you can specify that only one child can be passed to a component as children.

  import PropTypes from ‘prop-types’;  class MyComponent extends React.Component {    render() {      // This must be exactly one element or it will warn.      const children = this.props.children;      return (        <div>          {children}        </div>      );    }  }    MyComponent.propTypes = {    children: PropTypes.element.isRequired  };  

Default Prop Values

You can define default values for your props by assigning them to a special DefaultProps property:

  class Greeting extends React.Component {    render() {      return (        <h1>Hello, {this.props.name}</h1>      );    }  }    // Specifies the default values for props:  Greeting.defaultProps = {    name: ‘Stranger’  };    // Renders “Hello, Stranger”:  const root = ReactDOM.createRoot(document.getElementById(‘example’));   root.render(<Greeting />);  

Using babel transforms such as plugin-proposal-class-properties (previously plugin-transform-class-properties), you can declare default props as static properties within the React component class.

This syntax is not finalized and will require a compilation step to work in a browser. For more information, see Class field proposals.

  class Greeting extends React. Component {    static defaultProps = {      name: ‘stranger’    }      render() {      return (        <div>Hello, {this.props.name}</div>      )    }  }  

defaultprops will ensure that this.props.name will have a value if the parent component has not specified it.

propTypes type checking happens after defaultprops are resolved, so type checking will also apply to defaultprops.

Next TopicBrowserRouter in React

ReactJS PropTypes

ReactJS PropTypes

PropTypes in React

Javascript

Do React props work?

Why validate props in React?

Using PropTypes in React

Using the prop-types library in React

React PropTypes validator

Basic types

Renderable types

Instance types

Multiple types

Collection types

PropTypes.arrayOf

PropTypes.objectOf

PropTypes.shape

PropTypes.exact

Required types

Custom validators for type-checking React props.

Native custom validator

Custom validators and collections

All-purpose custom validators

Validating Percentage Stat in React

Validate React component props in a production

Type checking with PropTypes

PropTypes

Requiring Single Child

Default Prop Values

T-Test in R

Verbal Reasoning | Blood Relations 1

You may also like