Quick Contact


    Props Validation

    Props Validation is all about validating to props. As if you want to pass default value to property or you want to make any property mandatory then that is done by use of validation. Implementation is as below-:

    In this there are many properties used. Whenever you create a property then it’s mandatory to define the validation if required with some value you want to set. If you want to pass something which is important for user to pass then “.isRequired” is used.

    		Import PropTypes from ‘prop-types’;
    		Import React from ‘react’;
    		Import ReactDOM from ‘react-dom’;
    		Class App extends React.Component {
    		Render() {
    		< div>
    		  		 < h1>Hello, {this.props.name} < /h1>
    		< h3>Array: {this.props.propArray}< /h3>
    		< h3>Func: {this.props.propFunc}< /h3>
    		< h3>Number: {this.props.propNumber}< /h3>
    		< h3>String: {this.props.propString}< /h3>
    		< /div>
    		};
    		}
    		}
    		App.propTypes = {
    		  Name: PropTypes.string,
    		propArray: PropTypes.array.isRequired,
    		propFunc: PropTypes.func,
    		propNumber: PropTypes.number,
    		propString: PropTypes.string,
    		};
    		App.defaultProps = (
    		   Name= ‘ducat.com’,
    		   propArray: [1, 2, 3, 4, 5,];
    		propFunc: function=(e) {
    		return e
    		};
    		propNumber: 1,
    		propString: “String value...”
    		};
    		Export default App;
    	

    So here so many properties are created. Whenever you create property you have to define the validation if required and you have to set some default value for particular properties. Here in prop type datatypes are put for each of the property like string, array, number, Boolean. If you want that something compulsory you have to pass that “isRequired” is used. You can initialise all the properties with the default value like in function (e) same “e” is returning or you can pass particular value you want by default.

    Output is as-:
    props-validation

    Moreover there are different validators for basic datatypes.

    1. PropTypes.any – It means that any data type can be used for prop.
    2. PropTypes.bool – Prop can be Boolean
    3. PropTypes.func – Prop can be function
    4. PropTypes.string – Prop can be string
    5. PropTypes.array- Prop can be array
    6. PropTypes.number- Prop can be a number
    7. PropTypes.object
    8. PropTypes.symbol
    9. PropTypes.instanceOf
    10. PropTypes.isRequired
    React Custom Validator

    Custom validation can also be performed when required. Following arguments are used for custom validation-:

    Props, PropName, ComponentName

    For Example-:
    		Const Component = React.cretaeClass({
    		   propTypes: {
    		Item: function (props, propName, componentName)
    		{
    		Const item = props[propName];
    		If (!item.isValid())  {
    		  Return new Error (‘Invalid Item’);
    		}
    		}
    		},
    		})
    	

    Copyright 1999- Ducat Creative, All rights reserved.