Props Validation with prop-types in React

Posted on: December 10, 2019 by Dillion Megida

It is essential to validate props in React components so as to avoid unexpected syntax or logical errors. Improper use of props is usually the cause of this.

Flow or TypeScript is popular type-checkers but they involve checking the data types in the whole application.

With the prop-types npm package, you can type-check props from components to components.

prop-types allows us to define the type of props to be used within components. An error is flagged with a succinct message when a different type is declared.

Validating props is also essential to aid ease in the collaboration of a project. The developer may understand what is supposed to be what in an application but contributors may not know.

Also, the developer himself may be confused after coming to a long-abandoned project.

Reason for Props Validation

For example, in a component, ‘Layout’ with a prop ‘header’, used like this;

// layout.js

export default props => (
	<div>
		<h1>{props.header}</h1>
		{props.children}
	</div>
)

The ‘header’ prop obviously expects a string. An about page component may misuse the prop like this;

// about-component.js

export default props => (
	<Layout
		header={1}
	>
		<h2>About page</h2>
	</Layout>
)

This would render correctly but the prop isn’t used well. It is a number on the about page component instead of a string.

This is a very simple use case. There could be complex applications of props.

These include passing props from components to many other components or performing specific operations on a prop. For example,

// layout.js
export default props => (
	<div>
		{
			props.BreadCrumbs.map(link =>
				<a href='#' title={link}> {link} </a>
			)
		}
	</div>
)

The layout component expects a BreadCrumb prop which is of type array.

If a component should provide a string for the prop, there would be an error and the message may not be specific enough.

prop-types becomes a win in providing adequate error messages, such as ‘BreadCrumb prop expects an array’. This will save either the developer or contributors from stressful (maybe) debugging,

Benefits of prop-types

It ensures that

the required data is provided.
appropriate data types for props are used.
a chosen value is within the range of expected values.
and so much more…

Generally,

prop-types ensure that all props are used properly thereby avoiding errors. It is only used in development mode but not production for performance reasons.

How to Use prop-types

First, Installation npm install --save prop-types

Secondly, import the package import TypeChecker from 'prop-types'; TypeChecker could be any desired name.

Thirdly, define your validations Example,

// layout.js
const Layout = props => (
	<div>
		{
			props.BreadCrumbs.map(link =>
				<a href='#' title={link}> {link} </a> 
			)
		}
		<h1>{props.header}</h1>
		}
	</div>
)

Layout.propTypes = {
	BreadCrumbs: TypeChecker.array.isRequired,
	header: TypeChecker.string.isRequired,
}

export default Layout;

With this validation rules set, we ensure that BreadCrumbs is an array, header is a string and both props are required.

Appropriate and specific error messages are logged to the console when any of the rules are broken.

More rules that can be set are;

Layout.propTypes = {
	booleanProp: TypeChecker.bool,
	// and other data types such as func, number, object, string, symol

	elementProp: TypeChecker.element,
	// this is any react element (e.g <Layout />)

	valueFromProp: TypeChecker.oneOf(['Movies, Games']),
	// here a range of values is provided

	valueTypeFromProp: TypeChecker.oneOfType([
		TypeChecker.bool,
		TypeChecker.array
	])
	// here, a range of value types is provided
}

Find out more validation rules in the package documentation