Nerd For Tech
Published in

Nerd For Tech

React prop type-checking: PropTypes

While many React applications may use TypeScript for its built in type checking if you’re working in a normal react application you can use the prop-types library to do some of the same work. Specifically this library will allow you to check that the props are the correct type and that they exist.

Installation

If you are working with React Version 16 or greater you can install the library with:

npm install — save prop-types

If you are working on an older version of React, there's no need to install, prop-types is built right into React!

Importing

To get started working with prop-types import it into a component with this line of code towards the top of your file:

import PropTypes from ‘prop-types’

If you’re working in an older version of React you can access prop-types with React.PropTypes.

Usage

The usage of prop-types will be similar to both versions. Lets start with the newer library version. First you need to define what the prop-types will be for your component by using the .propTypes method on the component like so:

Example.propTypes = {}

Inside the object is where we will declare what names and expected types of the props will be with a key value pair. To define the type we use PropTypes. and then whatever type we expect.

Example.propTypes = {  name: PropTypes.string};

For older React versions the initial setup is the same but to set the prop’s type you need to access PropTypes by doing React.PropTypes

You can accept strings, arrays, Booleans, functions, numbers, objects and a whole list of other types. For more detailed list and usage check out the official documentation.

Check for presence

To make sure a prop is always being passed along regardless of its type you can add the .isRequired method to the end of its type definition like so:

Example.propTypes = {  name: PropTypes.string.isRequired};

Case Study | Try it out !

In the example below I’ve set up a component that accepts a prop, a name, and instead of passing it a string I’ve passed it a number (oops!). The console displays a warning that there is an Invalid prop name of type number and that it expected a string instead.

Feel free to play around with this example I’ve set up. What would happen if you don’t pass in a value at all?

--

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

Set up Tailwind CSS for your Vue.js app

What is Virtual Dom in React?

First steps with Three.js

Decorator based Loader for Angular HttpClient

Integrating Python Flask Backend with Electron (Nodejs) Frontend

Shadow DOM ?

Tips for Making Interfaces Strong with Utility Types in TypeScript

Javascript Async/Await/Microtask Queue Explained

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Igor Veyner

Igor Veyner

Software Engineer | Bootcamp Grad

More from Medium

Some important topics from REACT

Things to know about ReactJs

How to make a table in React with Hooks

A quick insight into React