How to TypeCheck Your React Props
Tags: react, reactnative, props
Published: 2018-03-26 09:28:43

---
title:  How to TypeCheck Your React Props
published: true
description: In this article, I am making sure your React props are of the valid type. Check out how to do it easily!
tags: React, React Native, Props.
---
Previously I have written about how to [pass props in react](http://kolosek.com/react-props-basic/) and also how to [indirectly communicate between components using props](http://kolosek.com/react-props-communication/). Today, we're getting to the finale of props guide series, where I'll talk about how to check whether you passed correct props.

## React props - Make sure you are typechecking
As the application you're working on grows, you'll definitely want to add some kind of prop typechecking - you don't want bugs you'll work on for hours or days before you realize you just sent an empty array instead of an object!

You can be a bit more extreme and use something like [Typescript](https://www.typescriptlang.org) to cover your whole app with checks. While TypeScript can be quite useful and nice, there's no need for this - you don't need to enforce typechecking of every single function and variable.

*Defining PropTypes is not enough! Make sure you're also [covering your code with tests](https://kolosek.com/react-jest-snapshot/)!*

React has built-in [PropTypes](https://www.npmjs.com/package/prop-types) so you can typecheck easily. Basically, the idea is that inside of `propTypes` you define the type for each of the props used in the component. Here's the example component I'll be defining PropTypes for:

```javascript
class Input extends Component {
    ...
    handleChange = (event) => {
        const newValue = event.target.value;
        this.props.updateParent(newValue);
    }
    ...
    render() {
        return (
            <input
                onChange={this.handleChange}
                placeholder={this.props.placeholder}
                type="text"
                value={this.props.value}
            />
        )
    }
}
```
The propTypes will look like this:

```javascript
    Input.propTypes = {
        placeholder: PropTypes.string,
        updateParent: PropTypes.func.isRequired,
        value: PropTypes.string.isRequired,
    };
```
You have probably noticed that for `updateParent` and `value` I am using `isRequired` after prop type definition. This is to specify that the prop must be passed to a component, and that something will probably break if it's not done so.

*If [rendering a list sent as a prop](https://kolosek.com/react-jsx-loops/), always make sure it's either required or default value is set!*

On the other hand, a `placeholder` is not required. For optional props like this one, you might want to define a default value when nothing is pressed. You can achieve that by defining `defaultProps` for a component:

```javascript
    Input.defaultProps = {
        placeholder: "Default placeholder",
    };
```

Besides the standard types, you can also add a typecheck whether a prop is an instance or some class:

```javascript
   Parent.propTypes = {
        inputChild: PropTypes.instanceOf(Input),
    };
```

You can, as well, specify that prop can be any data type, by using `PropTypes.any`:
```javascript
   Parent.propTypes = {
       anyValue: PropTypes.any,
   };
```

*Try to avoid any, it's like not defining prop types at all - if you pass an empty array instead of an actual false value, that [conditional rendering](https://kolosek.com/react-jsx-conditions/) won't work as you expect!*

PropTypes do not limit you to use just predefined type validators, you can also **define your own**. For more useful information on typechecking, take a look at the [official guide](https://reactjs.org/docs/typechecking-with-proptypes.html), as it contains all the answers to questions you might have.

For all of the issues found while typechecking you will get notified in a console.

I strongly recommend that you **configure eslint** to require [props validations](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md) for all components. This way you won't forget to define propTypes for your components, so you won't miss out some of the accidental issues you might have made during the coding.

You can also configure eslint to enforce [defining of default values for props that are not required](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-default-props.md) if you prefer to. This, although nice to have for consistency over the component instances, is not of such a big importance.

I hope you enjoyed this article and learned something new and useful, or at least freshened up your knowledge a bit!

This post is originally published on [Kolosek Blog](https://kolosek.com/react-props-typechecking/).