Trending October 2023 # Different Proptypes And Working With Examples # Suggested November 2023 # Top 17 Popular

You are reading the article Different Proptypes And Working With Examples updated in October 2023 on the website Benhvienthammyvienaau.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested November 2023 Different Proptypes And Working With Examples

Introduction to React PropTypes

React has an in built mechanism to add type checking for the components. A special property called PropTypes is used for setting up the type checking. The props are checked against the configured type definitions whenever the props pass to a React Component. A warning pops up on the JavaScript console whenever an invalid value is passed. The values need to be resolved if a default prop is passed to a React Component, before checking the type against the PropType. This also concludes that default values also have to be checked against the PropTypes definitions.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Different PropTypes and their Working

Different validators are exported by the PropTypes to configure type definitions.

Validators used for basic data types are stated below:

any: Props of any data type can get validated by this.

symbol: Props with symbol data type can be validated by this.

func: Function PropType can be used for validation by this validator.

array: Prop with an array data type can get validated by this.

bool: Props with Boolean data type can get validated by this.

string: Props with String data type can get validated by this.

object: Object type of prop can get validated by this.

number: Props with Numeric data type can get validated by this.

The above PropTypes can be used while building a react application.

Component.propTypes = { numberProp: PropTypes.number, functionProp: PropTypes.func anyProp: PropTypes.any, } 1. Renderable Types

The validators stated below are also exported by PropTypes to ensure that the value being passed can be rendered by React.

a. PropTypes.node: Any prop value such as an array, an element, a string or a number that React can render.

b. PropTypes.element: An element should be used as a Prop.

Code:

Component.propTypes = { Propnodesyntax: PropTypes.node, Propelementsyntax: PropTypes.element }

PropTypes.element is commonly used to ensure a singular child of component. A warning gets displayed whenever there are multiple or no children of the component.

Code:

Component.propTypes = { singlechild: PropTypes.element.isRequired } 2. Instance Validators

PropTypes.instanceOf validator is used whenever a prop is to become a specific JavaScript class’s instance. The fundamental instanceof method is leveraged by it.

Code:

Component.propTypes = { IndividualProp: PropTypes.instanceOf(Individual) } 3. Multiple Datatype Validators

Validators can also be exported by PropTypes to allow a group of different values or different groups of data types.

The validators used for this purpose are as follows:

a. PropTypes.oneOf: A particular group of values are set in a prop.

b. PropTypes.oneOfType: The prop needs to behave like a union of types and it needs to be from the specified set of types.

Code:

Component.propTypes = { Propenum: PropTypes.oneOf( ['move',[1,2,3],True]), Propunion: PropTypes.oneOfType ([ PropType.string, PropType.array, PropType.bool, PropType.object ]) } 4. Collection Datatype Validators

Other than the validators PropTypes.object & thePropTypes.array, there are other types of validators provided by PropTypes. These validators provide more calibrated validation of objects and arrays. The validators which can be used.

5. PropTypes.arrayOfValidator

This validator is used for ensuring the prop to be an array that matches the type which is specified for validating.

Code:

Component.propTypes = { GroupArrayProp: PropTypes.arrayOf( PropTypes.instanceOf(Individual) ), NumerousArrayProp: PropTypes.arrayOf ( PropTypes.oneOfType ([ PropType.bool, PropType.number ]) ) } 6. PropTypes.objectOf Validator

Code:

Component.propTypes = { PropObjectString: PropTypes.objectOf ( PropTypes.string ), PropObjectMultiple: PropTypes.objectOf ( PropTypes.oneOfType ([ PropType.bool, PropType.number, PropType.func, ]) ) } 7. PropTypes.shape

When we need a more extensive validation then PropTypes.shape is used. It confirms the prop to be an object which holds a specific key set with specific type of values.

Code:

Component.propTypes = { BiodataProp: PropTypes.shape ({ isEmployee: PropTypes.bool, DOJ: PropTypes.instanceOf(Date), identityNo: PropTypes.number, Department: PropTypes.string, Sex: PropTypes.oneOf(['M', 'F']), }) } 8. PropTypes.exact Validator

To match the objects strictly, PropTypes.exact is used in the following way.

Code:

Component.propTypes = { MarksProp: PropTypes.exact({ Language: PropTypes.oneOf (['Sanskrit', 'Devnagri', 'Gurumukhi']), score: PropTypes.number }) } 9. Required Validator

All of the PropTypes we saw till now doesn’t need the prop to be mandatory. Although we can add is required and the time it sees an incorrect prop, the warning message displays.

Code:

Component.propTypes = { PropString: PropTypes.string.isRequired, PropBoolean: PropTypes.bool.isRequired, PropObject: PropTypes.object.isRequired, PropArray: PropTypes.array.isRequired, PropNumeric: PropTypes.number.isRequired, BiodataProp: PropTypes.shape ({ IdentityNo: PropTypes.number.isRequired, DOJ: PropTypes.instanceOf(Date).isRequired, isEmployee: PropTypes.bool }).isRequired } 10. Custom Type

There are some occasions where custom validation logics are defined for a component prop. Custom validation is allowed by PropTypes to use it for typechecking.

Basic Examples:

There are three arguments supported by custom validation:

componentName: This argument contains the component’s name.

propName: This argument has the prop’s name.

props: This contains the props which are going to be passed to a component.

Examples of React PropTypes

Given below are the examples mentioned :

Example #1

Basic Example of React Proptypes.

chúng tôi

Code:

import React , { Component } from "react"; import { render } from "react-dom"; import PropTypes from "prop-types"; export default class App extends Component { render() { return ( ); } } App.propTypes = { name: PropTypes.string.isRequired }; if (typeof window !== "undefined") { }

Output:

Example #2

React PropTypes example with Array, String, Number and Boolean Values.

In the example below, the values like array, string, number and Boolean are validated using this.props.arrayProp, this.props.stringProp, this.props.numberProp, this.props.boolProp respectively.

chúng tôi

Code:

import PropTypes from 'prop-types'; import React from 'react'; import ReactDOM from 'react-dom'; class ComponentExample extends React.Component{ render(){ return( {} Array Example: {this.props.arrayProp} String Example: {this.props.stringProp} Number Example: {this.props.numberProp} Boolean Example (which is set True) {this.props.boolProp} ); } } ComponentExample.propTypes = { arrayProp: PropTypes.array, stringProp: PropTypes.string, numberProp: PropTypes.number, boolProp: PropTypes.bool, } ComponentExample.defaultProps = { numberProp: "15", stringProp: "EDUCBA", arrayProp: ['Rahul', 'Adarsh', 'Ankush'], boolProp: true, } ReactDOM.render( document.getElementById("root") );

Output:

Conclusion

On the basis of the above article, we saw PropTypes and its working. We went through the different methods of validating props and the examples above helps in understanding their application.