Props Destructuring And PropTypes

In this article, you will learn Props Destructuring and PropsTypes.

1. What is Props Destructuring?

Destructuring is a feature of Javascript(ver 2015 released) ES6. Destructuring is creating new variables from a structured object. After destructuring the object, you can use the individual pieces of data. 

Example

Object :
const friend = {
    fullname: "Suhana Ashish Kalla" ,
    hobbies : "Games",
    qualification:"BCA"
}

Destructuring

Single line command to create a new variable with the value from friend object.

Example

const {fullname,hobbies,qualification} = friend;

The above code is similar to the Manual Destructuring each field.

Example

const fullname = friend.fullname;
const hobbies = friend.hobbies;
const qualification = friend.qualification;

Code Explanation

In the above example, friend is object destructuring automatically breaks the respective fields fullname, hobbies, and qualification in a single line command, otherwise you have to perform manual Destructuring(take fields value from object).

Example

App.js file code,

import React from "react";
function App() {
  const friend = {
    fullname: "Suhana Ashish Kalla" ,
    hobbies : "Games",
    qualification:"BCA"
}
const friend2 = {
  fullname: "Ashish Kalla" ,
hobbies : "Movies",
qualification:"Bsc(IT)"
}
  return (
    <div>
      <Friend obj={friend} />
      <Friend obj={friend2} />
    </div>
  );
}
function Friend({obj}) {
  const {fullname, hobbies,qualification } = obj;
  return (
    <div>
    <h4>{fullname}</h4>
      <div>Hobbies:{hobbies}<br/><br/>Qualification:{qualification}</div>
      <hr/>
      </div>
  );
}
export default App

2. What is PropTypes?

PropTypes defines prop (property) data type explicitly.

Javascript is a weakly/loosely typed language. That's why we are not assigning datatype to any variable.

But somewhere in the coding module or form we expect to receive data in perfect data types. Don't worry if you forget to define datatypes. The code will still compile, but will also display a console error.

My suggestion is you should use PropTypes which will be helpful while other developers code on your project or if you are doing KT (knowledge transfer) or switching to another project.

PropTypes make it easy to understand the data behaviour perfectly. By using the following lines in the component, you can easily use proptypes. No need to install any extra NPM packages.

import PropTypes from 'prop-types';

ReactJS support following datatypes for props.

1. String -- PropType.string  -- "Csharpcorner"
2. Number -- PropType.number  -- 45
3. Boolean -- PropType.bool -- true/false
4. Array   -- PropType.array  -- []
5. Object -- PropType.object -- {friend:"Suhana Ashish Kalla"}

The above datatypes are frequently used.

ReactJS also supports other datatypes like,

1. Function
2. Symbol

Example

App.js file code,

import React from "react";
import Friend from "./Friend";
function App() {
  return
 (
    <>
      <Friend fullname="Suhana Kalla" age="50" />
      <Friend fullname="Ashish Kalla" age="62" />
    </>
  );
}
export default App;

Friend.js file code,

import React from 'react';
import { PropTypes } from 'prop-types';
const Friend = (props) => {
  return (
    <div>
      <p>{props.fullname}</p>
      <p>Age: {props.age}</p>
    </div>
  );
};
Friend.propTypes = {
  fullname: PropTypes.string,
  age: PropTypes.number
};
export default Friend;

Happy Coding.