React JS Props Validation with examples

4 years ago
Zaid Bin Khalid
3014 Views
2

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 file code is below.

//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’}), Never update the state directly as this.state.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.

4 years ago
Zaid Bin Khalid
3014 Views
2

Prev Next

Related Linkes

React JS Props Validation with examples