Properties validation is a useful way to force the correct usage of the components. This will help during development to avoid future bugs and problems, once the app becomes larger. It also makes the code more readable, since we can see how each component should be used.<\/p>\n
Validating Props<\/strong><\/p>\n In this example, we are creating App component with all the props that we need. App.propTypes is used for props validation. If some of the props aren’t using the correct type that we assigned, we will get a console warning. After we specify validation patterns, we will set App.defaultProps.<\/p>\n App.jsx<\/p>\n import React from ‘react’;<\/p>\n class App extends React.Component {<\/p>\n render() {<\/p>\n return (<\/p>\n <div><\/p>\n <h3>Array: {this.props.propArray}<\/h3><\/p>\n <h3>Bool: {this.props.propBool ? “True…” : “False…”}<\/h3><\/p>\n <h3>Func: {this.props.propFunc(3)}<\/h3><\/p>\n <h3>Number: {this.props.propNumber}<\/h3><\/p>\n <h3>String: {this.props.propString}<\/h3><\/p>\n <h3>Object: {this.props.propObject.objectName1}<\/h3><\/p>\n <h3>Object: {this.props.propObject.objectName2}<\/h3><\/p>\n <h3>Object: {this.props.propObject.objectName3}<\/h3><\/p>\n <\/div><\/p>\n );<\/p>\n }<\/p>\n }<\/p>\n App.propTypes = {<\/p>\n propArray: React.PropTypes.array.isRequired,<\/p>\n propBool: React.PropTypes.bool.isRequired,<\/p>\n propFunc: React.PropTypes.func,<\/p>\n propNumber: React.PropTypes.number,<\/p>\n propString: React.PropTypes.string,<\/p>\n propObject: React.PropTypes.object<\/p>\n }<\/p>\n App.defaultProps = {<\/p>\n propArray: [1,2,3,4,5],<\/p>\n propBool: true,<\/p>\n propFunc: function(e){return e},<\/p>\n propNumber: 1,<\/p>\n propString: “String value…”,<\/p>\n propObject: {<\/p>\n objectName1:”objectValue1″,<\/p>\n objectName2: “objectValue2”,<\/p>\n objectName3: “objectValue3”<\/p>\n }<\/p>\n }<\/p>\n export default App;<\/p>\n main.js<\/p>\n import React from ‘react’;<\/p>\n import ReactDOM from ‘react-dom’;<\/p>\n import App from ‘.\/App.jsx’;<\/p>\n ReactDOM.render(<App\/>, document.getElementById(‘app’));<\/p>\n","protected":false},"excerpt":{"rendered":" Properties validation is a useful way to force the correct usage of the components. This will help during development to avoid future bugs and problems, once the app becomes larger. It also makes the code more readable, since we can see how each component should be used. Validating Props In this example, we are creating…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8528],"tags":[8581],"class_list":["post-74307","page","type-page","status-publish","hentry","category-reactjs","tag-props-validation"],"acf":[],"yoast_head":"\n