 in React and how we can make our components more secure.

, meaning it does not have any types such as string, integer, boolean, etc.  This can become a challenge at times as users of our components may pass the wrong types to our props i.e. giving a string when we expect a number.   We can use Typescript to help manage this but it requires quite a bit of a refactor to your application along with a learning curve.  

 may not be as powerful but certainly helps secure our application in a much shorter time frame.

 gives us the ability to inform users when they pass something to our component that was not intended.  From my own experience, when using reusable components, I always found it great when a component had it's 

 declared as it acted like documentation on how that component should be used.  I am also much more confident in using a component that has it's 

As a side note, since React version v15.5 we use the 

 in some legacy application just know it behaves very similar to 

By the end of this post, you will be able to:

With the above knowledge in place, you will be more confident in building a component that will be used as intended.

To get the most of this article, we assume you're familiar with the component basics in React (functional and class-based components) and also core JavaScript.  

If you do not know any of the above but would like to learn, here are some great resources:

npm install --save prop-types
yarn add prop-types

To access within your component we can import:

This is the same in functional components as it is in class-based components.

Validating props in a class-based component

Class based components aren't used as much these days due to the introduction of 

 and letting us manage state in functional components.  It is best practice now to keep all of your components functional, but in most react applications there will be a combination of functional component and also class-based components.

class Profile extends Component {
  render() {
    const { name, age } = this.props
    return (
      <div className="profile">
        Name: {name}
        <br />
        Age: {age}
      </div>
    )
  }
}

.  It's actually not too complicated, we just need to add the following to our class component.

Profile.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number
};

Let's see what happens if we try to pass a number in for our 

, but will show the following in the console.

Profile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

 prop must be a number, but age, as we all know, can be a sensitive subject so we can set age to have a default of 

Profile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

Profile.defaultProps = {
  age: 21
};

 component is now much more secure and tells our users when they pass in the wrong value or the wrong value type to our component.

Here is a Codesandbox that you can play around it:

Validating props in a functional component

When creating functional components, you will also want to validate the props being passed in to make your component secure.

const Profile = ({ name, age }) => {
  return (
    <div className="profile">
      Name: {name}
      <br />
      Age: {age}
    </div>
  );
};

Thankfully, that is the biggest change we have to make.

Profile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

Profile.defaultProps = {
  age: 21
};


 prop.  We want to ensure that our component has only a single child.

const Paragraph = ({ children }) => {
  return <div className="paragraph">{children}</div>;
};

Paragraph.propTypes = {
  children: PropTypes.element.isRequired
};


If we tried creating this component like so:

We would get an error in our console informing us that we expect a single element.

This is a common pattern and if you have ever used a component library you've probably seen it before.

 property that ensures your prop is limited to specific values using an enum.

 of warning.  We have three types for our warning so we can use the 

 property to tell the user if they pass in something we don't expect.

Alert type="banana">
  <span>Error in the application</span>
</Alert>

 is not one of our values, an error will be shown in the console.

This is quite powerful and allows us to build resilient components.

 is another validator we have at our disposal that we can use to validate objects being passed into our component props.

So we can give the user an error if their object does not have a 

 also lets us create custom validators using something like 

.  If our component accepts an email prop, we can add a custom validator for it. 

We can include the custom validator in the 

 property.  If an invalid email is passed in we give a custom error message which in our case is 

We have covered most of the available validators above but here is a list with all of them.

AUTHOR

Paul Ryan

In this post, we will be discussing PropTypes in React and how we can make our components more secure.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Mastering React PropTypes

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript