ReactJS Tutorial – Props Overview and Validation

The tutorial provides the detail on the usage of props in the React application, How to define default Props, Props example, State and Props Example.

What is Props in React ?

Props in React are similar to properties which are read-only and are passed as argument within the component. It acts as the function arguments and allows to share data among components. Props are immutable as we cannot modify the values of props within the component. Thus , it is preferred to define the components with the State which can be updated with the change in the component.

The attributes in the component can be accessed using this.props and use render( ) method to render dynamic data among the components.

Example – the below example in App.js read the value from props attribute which is being pass from Main.js using reactDOM.render( ) method.

import React, { Component } from 'react';
class App extends React.Component {
   render() {
      return (
          <div>
            <h1> Hello All , Oracleappshelp.com Admin Name is : { this.props.admin } </h1>
            <p> <h4> This the simple example of  using props in React</h4> </p>          
          </div>
      );
   }
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App admin="Mohit Sharma" />, document.getElementById('app'));
Response for Props example

Defining Default Props in the component

We have seen how to pass the props using the reactDOM.render( ) method but props can also be defined as default within the component. The below example shows how component can read the default props value.

import React, { Component } from 'react';
class App extends React.Component {
   render() {
      return (
          <div>
              <h1>Define Default Props in React Component</h1>
            <h3>Hello All, Oracleappshelp.com admin name is  {this.props.admin}</h3>
            <h3>His hobby is  {this.props.hobby}</h3>
            <p>Another props example with the usage of default props value</p>
          </div>
        );
    }
}
App.defaultProps = {
   admin: "Mohit Sharma",
   hobby: "blogging"
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));
Response for default props example

State and Props Example

We have seen the example for using State and Props seprately. The below given example provide the usage of both State and Props. The State has been defined in the Parent Component using Constructor and passing the value to the child components using props.

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         employee: "employee props vlaue is read.",
         department: "department props vlaue is read."
      }
   }
   render() {
      return (
         <div>
            <Header employeeProp = {this.state.employee}/>
            <Content departmentProp = {this.state.department}/>
         </div>
      );
   }
}
class Employee extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.employeeProp}</h1>
         </div>
      );
   }
}
class Department extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.departmentProp}</h2>
         </div>
      );
   }
}
export default App;
Response for State and Props Example

Props Validation in React

Props Validation is the process to ensure that the defined props values are correctly mapped with the attributes as per the definition. This helps in avoiding application issues at the run-time and validate the drill down value for each component being used.

The below given are the validators which can be used while defining props in React Application.

React Props TypeReact Props Type Description
PropTypes.number props defined as an number
PropTypes.object props defined as an object
PropTypes. array props defined as an array
PropTypes. func props defined as a function
PropTypes. any props defined with any data type
PropTypes. bool props defined with boolean type
PropTypes.string props defined as string
PropTypes.symbol props defined as symbol
PropTypes.element props defined as an element
PropTypes.node props defined as the node
PropTypes.oneOf() props defined as one of several types of values
PropTypes.instanceOf props defined as an instance of a particular JavaScript class
PropTypes.isRequired defined props must be provided
PropTypes.oneOfType([PropTypes.
string,PropTypes.number])
props can render anything: numbers, strings, elements or an array
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class App extends React.Component {
   render() {
      return (
          <div>
              <h1>Props validation React example</h1>
              <table>
                  <tr>
                      <th>React Props Type</th>
                      <th>React Props Value</th>
                      <th>is React Props Valid ?</th>
                  </tr>
                  <tr>
                      <td>Function</td>
                      <td>{this.props.propFunc(12345)}</td>
                      <td>{this.props.propFunc(12345) ? "true" : "False"}</td>
                  </tr>
                  <tr>
                      <td>Boolean</td>
                      <td>{this.props.propBool ? "true" : "False"}</td>
                      <td>{this.props.propBool ? "true" : "False"}</td>
                  </tr>
                  <tr>
                        <td>Array</td>
                        <td>{this.props.propArray}</td>
                        <td>{this.props.propArray ? "true" : "False"}</td>
                    </tr>
                  <tr>
                      <td>String</td>
                      <td>{this.props.propString}</td>
                      <td>{this.props.propString ? "true" : "False"}</td>
                  </tr>
             </table>
        </div>
        );
   }
}
App.propTypes = {
    propArray: PropTypes.array.isRequired,
    propBool: PropTypes.bool.isRequired,
    propFunc: PropTypes.func,
    propString: PropTypes.string,
}
App.defaultProps = {
    propArray: ['Mohit -','Rohit -','Ajay -','Vijay'],
    propBool: true,
    propFunc: function(sum){return sum+54321},
    propString: "Props Validation Example",
}
export default App;
Response for Props Validation example