by Sai gowtham

React PropTypes tutorial for the beginners

In this tutorial, we are going to learn about and how to use proptypes in react with the help of examples.

PropTypes

  • PropTypes helps us to check, whether component props is receiving correct type data or not.

To use PropTypes in react, first, we need to install the prop-types package from the npm.

npm i -D prop-types

Example:

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
function App(props) {
  return (
    <div className="App">
      <h1>{props.name}</h1>    </div>
  );
}

App.propTypes = {  name: PropTypes.string};
ReactDOM.render(<App name={1} />,document.getElementById("root"));

In this example, we have used PropTypes.string validator to name prop and we passed the value number inside render method, so we can see an error in the console.

react proptypes-error

Have you seen, the error is clearly showing expected type is string and received is number.

Available Type validators

This are available type validators PropTypes package gives us.

  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string
  optionalSymbol: PropTypes.symbol,

Required values

If we attach IsRequired property to any PropTypes we can get an error if we fail to pass the props to that component.

Example:

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";

function App(props) {
  return (
    <div className="App">
      <h1>{props.name}</h1>
    </div>
  );
}

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

ReactDOM.render(<App />,document.getElementById("root"));

In this example, we fail to pass the prop name to <App/> component so that we can see an error in the console.

Default prop values

By using defaultProps property, we can define the default prop values of a component.

Example:

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";

function App(props) {
  return (
    <div className="App">
      <h1>{props.name}</h1>
    </div>
  );
}

App.defaultProps = {
  name: "UnKnown"};

ReactDOM.render(<App />,document.getElementById("root"));

Now, if we fail to pass a prop value it will default to Unknown.

Validating Objects

Example:

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";

function App(props) {
  return (
    <div className="App">
      <h1>{props.user.name}</h1>      <p>{props.user.age}</p>    </div>
  );
}

App.propTypes = {
  user: PropTypes.shape({    name: PropTypes.string,    age: PropTypes.number  })};

const user = { name: "Sai", age: 3 };ReactDOM.render(<App user={user} />, document.getElementById("root"));

In this example, we are specifying the shape of a user prop object.

Validating array of objects

Example:

App.propTypes = {
  usersArray: PropTypes.arrayOf(   PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number
  })).isRequired
};

Requiring props.children

With PropTypes.element property, we can specify that component can only receive a single child.

import React from "react";
import PropTypes from "prop-types";

class App extends React.Component {
  render() {
    return (
      <div>
         {this.props.children}      </div>
    );
  }
}

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

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course