React PropTypes tutorial for the beginners

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};