Validate React Prop

By admin | | No Comments | React

You can validate the property of a React component using the built in PropTypes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import React from "react";
import { PropTypes } from "prop-types";
 
export class Setting extends React.Component {
  render() {
    return (
      <div>
        <ul>
          <li>{this.props.title}</li>
        </ul>
 
        <table>
          <tr>
            <td> Currency </td>
            <td> {this.props.currency} </td>
          </tr>
          <tr>
            <td> Rows Per Page </td>
            <td> {this.props.rowsperpage} </td>
          </tr>
        </table>
      </div>
    );
  }
}
 
Setting.defaultProps = {
  rowsperpage: 20,
  currency: "USD"
};
 
Setting.propTypes = {
  rowsperpage: PropTypes.number,
  currency: PropTypes.string
};
 
export default Setting;

When i pass the following props to the component

When there are validation errors they will be shown in the console as warning message

Warning: Failed prop type: Invalid prop rowsperpage of type string supplied to Setting, expected number.