In this session, we will learn about how to React JS Props validation with examples and code.
Validating Props
To get the correct usage of the components, properties validation is a useful way. Once the app becomes larger, this will help during development to avoid future bugs and problems, it also makes the code more readable and easy to use, since we can see how each component should be used.
Validating Props Example
In the given example, we are using and creating an App component with all the props we need. For props validation, we are using App.propTypes. we will get a warning if some of the props are not using the correct type which we assigned. We will set App.default props after we specify validation patterns.
//App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h3>Array: {this.props.propArray}</h3>
<h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
<h3>Func: {this.props.propFunc(3)}</h3>
<h3>Number: {this.props.propNumber}</h3>
<h3>String: {this.props.propString}</h3>
<h3>Object: {this.props.propObject.objectName1}</h3>
<h3>Object: {this.props.propObject.objectName2}</h3>
<h3>Object: {this.props.propObject.objectName3}</h3>
</div>
);
}
}
App.propTypes = {
propArray: React.PropTypes.array.isRequired,
propBool: React.PropTypes.bool.isRequired,
propFunc: React.PropTypes.func,
propNumber: React.PropTypes.number,
propString: React.PropTypes.string,
propObject: React.PropTypes.object
}
App.defaultProps = {
propArray: [1,2,3,4,5],
propBool: true,
propFunc: function(e){return e},
propNumber: 1,
propString: "String value...",
propObject: {
objectName1:"objectValue1",
objectName2: "objectValue2",
objectName3: "objectValue3"
}
}
export default App;
The main.js
//main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));
ReactJS Custom Validators
To perform custom validators ReactJS allows creating a custom validation function.
How to create a custom validation function.
The first argument in the component it should be props. To validate it is the propName. To validate again it is the componentName. Use of spread operator with props
Nowadays ES6 spread operator is very useful.
Use Validating Props
Nowadays ES6 spread operator is very useful. When we are not sure about the numbers of props it provides a feature to help us to pass props which are called dynamically. Means.
Ways to use props
There are two types or ways to pass props:
First-way pass props as props properties The second way to pass props as spread operator dynamically which is followed in live applications. Pass props without spread operator
import React, { Component } from "react";
import PropTypes from "prop-types";
class Input extends Component {
constructor(props) {
super(props);
}
render() {
const { placeholder, min, max, className } = this.props;
return (
<div>
<input
type="text"
placeholder={placeholder}
min={min}
max={max}
className={className}
/>
</div>
);
}
}
class App extends Component {
render() {
return (
<div>
<Input placeholder="enter name" min="10"
max="50" className="input" />
</div>
);
}
}
export default App;
Important Points
Always use setState function to update the state as setState({value:’value’}) If you not need it, the State should be avoided. To avoid useless re-rendering always use the shouldComponentUpdate function. To pass props parent to a child component, follow spread operator to remove imported libraries if not in use.
