 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.

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Mastering React <code>PropTypes</code></h1><div data-node-type="summary" class="summary-block">In this post, we will be discussing <code>PropTypes</code> in React and how we can make our components more secure.</div><p>JavaScript by nature is a loosely <strong>typed language</strong>, 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.  <code>PropTypes</code> may not be as powerful but certainly helps secure our application in a much shorter time frame.</p><p>Overall, <code>PropTypes</code> 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 <code>PropTypes</code> 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 <code>PropTypes</code> declared.</p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>As a side note, since React version v15.5 we use the <code>prop-types</code> NPM module whereas before we used <code>React.propTypes</code> so if you see <code>React.propTypes</code> in some legacy application just know it behaves very similar to <code>prop-types</code>.</p></div></div><h2><a name="what-you-will-learn?">What you will learn?</a></h2><p>By the end of this post, you will be able to:</p><ul><li><p>Add <code>propTypes</code> to class-based components</p></li><li><p>Add <code>propTypes</code> to functional components</p></li><li><p>Know the array of different <code>PropTypes</code> we have at our disposal</p></li><li><p>Be able to build reusable, resilient components</p></li></ul><p>With the above knowledge in place, you will be more confident in building a component that will be used as intended.</p><h2><a name="what-do-you-need-to-know?">What do you need to know?</a></h2><p>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.  </p><p>If you do not know any of the above but would like to learn, here are some great resources:</p><ul><li><p><a href="https://www.freecodecamp.org/learn" rel="noopener noreferrer nofollow">freecodecamp </a>is a great free resource that will help you become an expert at JavaScript</p></li><li><p>The <a href="https://reactjs.org/docs/getting-started.html" rel="noopener noreferrer nofollow">React </a>docs are great for getting started with react but to become an expert I recommend <a href="https://www.newline.co/fullstack-react/" rel="noopener noreferrer nofollow">fullstack react</a></p></li></ul><p>Now let's get into it!</p><h2><a name="getting-started-with-prop-types">Getting started with <code>prop-types</code></a></h2><p>So, as mentioned above we use the <code>prop-types</code> <a href="https://www.npmjs.com/package/prop-types" rel="noopener noreferrer nofollow">NPM module</a> to validate our props.</p><p>You can install using <code>yarn</code> or <code>npm</code>.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-AD7PB" id="cm-AD7PB">npm install --save prop-types
yarn add prop-types</textarea><p>To access within your component we can import:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-1eQPZ" id="cm-1eQPZ">import PropTypes from 'prop-types';</textarea><p>You can now use <code>PropTypes</code> in all of your components: (<code>ComponentName</code> being the name of your component)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-KIOUG" id="cm-KIOUG">ComponentName.propTypes = { .... }</textarea><p>This is the same in functional components as it is in class-based components.</p><h2><a name="validating-props-in-a-class-based-component">Validating props in a class-based component</a></h2><p>Class based components aren't used as much these days due to the introduction of <a href="https://reactjs.org/docs/hooks-intro.html" rel="noopener noreferrer nofollow">react hooks</a> 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.</p><p>Take the following <code>Profile</code> component that will display the <code>age</code> and <code>name</code> of a user.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-0AMHm" id="cm-0AMHm">class Profile extends Component {
  render() {
    const { name, age } = this.props
    return (
      &lt;div className="profile"&gt;
        Name: {name}
        &lt;br /&gt;
        Age: {age}
      &lt;/div&gt;
    )
  }
}</textarea><p>We want to make sure that the <code>name</code> prop is a <code>string</code> and the <code>age</code> prop is a <code>number</code>.  It's actually not too complicated, we just need to add the following to our class component.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-skkVp" id="cm-skkVp">Profile.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number
};</textarea><p>Let's see what happens if we try to pass a number in for our <code>name</code> prop:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-rMOLq" id="cm-rMOLq">&lt;Profile name={50} age={23} /&gt;</textarea><p>It will display the <code>name</code> as <code>50</code>, but will show the following in the console.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200505045059974_yupyeayup.png" attachmentid="1a078f29-4e5b-4570-8662-46a14d0f2dd5" contenteditable="false" data-width="772" data-height="132"><div></div></figure><p>We can also tell our <code>Profile</code> component that <code>name</code> is a required field like o..</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-ClN75" id="cm-ClN75">Profile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};</textarea><p>If we do the following:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-w2vGq" id="cm-w2vGq">&lt;Profile age={23} /&gt;</textarea><p>Our console will show:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200505045539678_failfail.png" attachmentid="4d8dfc0d-f122-4096-b31a-a6cb0e5b503d" contenteditable="false" data-width="757" data-height="57"><div></div></figure><p>We have declared that our <code>age</code> 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 <code>21</code> using <code>defaultProps</code>.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-6ho98" id="cm-6ho98">Profile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

Profile.defaultProps = {
  age: 21
};</textarea><p>Our <code>Profile</code> 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.</p><p>Here is a Codesandbox that you can play around it:</p><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Flk5rg&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Flk5rg&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Flk5rg%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><h2><a name="validating-props-in-a-functional-component"><br>Validating props in a functional component</a></h2><p>When creating functional components, you will also want to validate the props being passed in to make your component secure.</p><p>Let's turn our <code>Profile</code> class component into a functional one.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-o85YG" id="cm-o85YG">const Profile = ({ name, age }) =&gt; {
  return (
    &lt;div className="profile"&gt;
      Name: {name}
      &lt;br /&gt;
      Age: {age}
    &lt;/div&gt;
  );
};</textarea><p>Thankfully, that is the biggest change we have to make.</p><p>Like above, we can do the following:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-vQMXv" id="cm-vQMXv">Profile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

Profile.defaultProps = {
  age: 21
};
</textarea><p>Here is a Codesandbox that you can play around it:</p><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F03pvl&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2F03pvl&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2F03pvl%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><h2><a name="renderable-types"><br>Renderable Types</a></h2><p><code>PropTypes</code> also support renderable props.</p><p>Take the following <code>Paragraph</code> component, that has a <code>children</code> prop.  We want to ensure that our component has only a single child.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-xjSuX" id="cm-xjSuX">const Paragraph = ({ children }) =&gt; {
  return &lt;div className="paragraph"&gt;{children}&lt;/div&gt;;
};</textarea><p>Our <code>PropType</code> would then look like:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-3XhTj" id="cm-3XhTj">Paragraph.propTypes = {
  children: PropTypes.element.isRequired
};
</textarea><p>If we tried creating this component like so:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-ofJv1" id="cm-ofJv1">&lt;Paragraph&gt;
  	&lt;div&gt;TEST&lt;/div&gt;
	&lt;div&gt;TEST&lt;/div&gt;
&lt;/Paragraph&gt;</textarea><p>We would get an error in our console informing us that we expect a single element.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200505225829334_consolewarning.png" attachmentid="73e17302-73cc-4ddd-8113-d4d55a6ba2a8" contenteditable="false" data-width="750" data-height="67"><div></div></figure><p>This is a common pattern and if you have ever used a component library you've probably seen it before.</p><p>Here is the Codesandbox:</p><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F5dtb8&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2F5dtb8&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2F5dtb8%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><h2><a name="multiple-types">Multiple Types</a></h2><p><code>PropTypes</code> also has a <code>oneOf</code> property that ensures your prop is limited to specific values using an enum.</p><p>Take the following <code>Alert</code> component:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-xmeoJ" id="cm-xmeoJ">const Alert = ({ children, type }) =&gt; {
  return (
    &lt;div className="paragraph"&gt;
      {type}:{children}
    &lt;/div&gt;
  );
};

Alert.propTypes = {
  type: PropTypes.oneOf(["warning", "default", "danger"])
};

Alert.defaultProps = {
  type: "warning"
};</textarea><p>This component accepts a <code>type</code> prop which determines the <code>type</code> of warning.  We have three types for our warning so we can use the <code>oneOf</code> property to tell the user if they pass in something we don't expect.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-qCcQQ" id="cm-qCcQQ">Alert type="banana"&gt;
  &lt;span&gt;Error in the application&lt;/span&gt;
&lt;/Alert&gt;</textarea><p>Since <code>banana</code> is not one of our values, an error will be shown in the console.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200505230822301_oneOf%20error.png" attachmentid="0db34e16-c951-4424-922c-ecbf648f21cc" contenteditable="false" data-width="755" data-height="47"><div></div></figure><p>This is quite powerful and allows us to build resilient components.</p><p>Here is the Codesandbox:</p><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fw8y9x&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fw8y9x&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fw8y9x%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p></p><h2><a name="shape-property">Shape property</a></h2><p><code>PropTypes.shape</code> is another validator we have at our disposal that we can use to validate objects being passed into our component props.</p><p>Take the following <code>Profile</code> component that accepts a <code>person</code> object:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-XZ9u7" id="cm-XZ9u7">const Profile = ({ person }) =&gt; {
  return (
    &lt;div className="profile"&gt;
      Name: {person.name}
      &lt;br /&gt;
      Age: {person.age}
      &lt;br /&gt;
      Nationality: {person.nationality}
    &lt;/div&gt;
  );
};

Profile.propTypes = {
  person: PropTypes.shape({
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
    nationality: PropTypes.string,
  })
};</textarea><p>So we can give the user an error if their object does not have a <code>name</code> or <code>age</code> prop.</p><p>Here is a Codesandbox:</p><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fs1bfs&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fs1bfs&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fs1bfs%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><h2><a name="custom-validators">Custom Validators</a></h2><p><code>PropTypes</code> also lets us create custom validators using something like <code>regex</code>.  If our component accepts an email prop, we can add a custom validator for it. </p><p>We can do this like so:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-wl6eJ" id="cm-wl6eJ">const isEmail = function(props, propName) {
  const regex = /^((([^&lt;&gt;()[]\.,;:s@"]+(.[^&lt;&gt;()[]\.,;: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 email address`);
  }
};

const Profile = ({ person }) =&gt; {
  return (
    &lt;div className="profile"&gt;
      Name: {person.name}
      &lt;br /&gt;
      Age: {person.age}
      &lt;br /&gt;
      Nationality: {person.nationality}
      &lt;br /&gt;
      Email {person.email}
    &lt;/div&gt;
  );
};

Profile.propTypes = {
  person: PropTypes.shape({
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
    nationality: PropTypes.string,
    email: isEmail
  })
};</textarea><p>We can include the custom validator in the <code>shape</code> property.  If an invalid email is passed in we give a custom error message which in our case is <code>Invalid email address</code>.</p><p>In the console this looks like:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200506000951354_consoleerror.png" attachmentid="08136c9f-7e8b-4c6e-810c-86aeac1b47b0" contenteditable="false" data-width="682" data-height="62"><div></div></figure><p>Here is the Codesandbox:</p><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Ft048p&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Ft048p&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Ft048p%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p></p><h2><a name="available-validators">Available validators</a></h2><p>We have covered most of the available validators above but here is a list with all of them.</p><ul><li><p><code>PropTypes.any</code>: The prop can be of any data type</p></li><li><p><code>PropTypes.bool</code>: The prop should be a Boolean</p></li><li><p><code>PropTypes.number</code>: The prop should be a number</p></li><li><p><code>PropTypes.string</code>: The prop should be a string</p></li><li><p><code>PropTypes.func</code>: The prop should be a function</p></li><li><p><code>PropTypes.array</code>: The prop should be an array</p></li><li><p><code>PropTypes.object</code>: The prop should be an object</p></li><li><p><code>PropTypes.symbol</code>: The prop should be a symbol</p></li></ul><h2><a name="conclusion">Conclusion</a></h2><p>Today we learned:</p><ul><li><p>How to add <code>PropTypes</code> to a class based component</p></li><li><p>How to add <code>PropTypes</code> to functional components</p></li><li><p>The array of different <code>PropTypes</code> we have at our disposal</p></li><li><p>How to build resilient components that will inform the user when they pass incorrect props</p></li></ul><p>If you're interested in learning further, the React docs have a <a href="https://reactjs.org/docs/typechecking-with-proptypes.html" rel="noopener noreferrer nofollow">great section</a> on all the different <code>PropTypes</code> we have.</p><p>Have a great day.</p><p></p>

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)

Masterclasses

Tutorials

Fullstack React with TypeScript