ReactJS Tutorial for Beginners - 10 - Destructuring Props and States

❮ Previous Chapter Next Chapter ❯

---

In this chapter, we will learn about destructuring props and states in react. The destructuring is an ES6 feature that makes it possible to unpack values from arrays or properties from objects into distinct variables. In React, destructuring props and states improve code readability.

What is Destructuring?

Destructuring was introduced in ES6. It’s a JavaScript feature that allows us to extract multiple pieces of data from an array or object and assign them to their own variables. Consider we have an employee object with the following properties:

const employee = {
  firstName: "Ramesh",
  lastName: "Fadatare",
  emailId: "ramesh@gmail.com"
}

Before ES6, you had to access each property individually:

console.log(employee .firstName) // Ramesh
console.log(employee .lastName) // Fadatare
console.log(employee .emailId) // ramesh@gmail.com

Destructuring lets us streamline this code:

const { firstName, lastName, emailId } = employee ;

is equivalent to

const firstName = employee .firstName
const lastName = employee .lastName
const emailId= employee .emailId

So now we can access these properties without the employee. prefix:

console.log(firstName) // Ramesh
console.log(lastName) // Fadatare
console.log(emailId) // ramesh@gmail.com

Destructuring props in Functional Components

Employee functional component

Let's create a functional component called Employee with the following code:

import React from 'react'

export const Employee = props => {
    return (
        <div>
            <h1> Employee Details</h1>
            <h2> First Name : {props.firstName} </h2>
            <h2> Last Name : {props.lastName} </h2>
            <h2> Eamil Id : {props.emailId} </h2>
        </div>
    )
}

Note that we access employee data in the Employee component using props.

App component

Let's take a look at the App component. We are pass employee firstName, lastName and email to Employee component using props:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Table from './components/functional-components/Table';
import PropsDemo from './components/props/PropsDemo';
import { Employee } from './components/Employee';

function App() {
  return (
    <div className="App">
      <header className="App-header">
          <Employee firstName = "Ramesh" lastName = "Fadatare" emailId = "ramesh@gmail.com" />
      </header>
    </div>
  );
}

export default App;

Two ways to destructure props in functional component

There are two ways to destructure props in a functional component the first way is destructuring it in the function parameter itself:

import React from 'react'

export const Employee = ({firstName, lastName, emailId}) => {
    return (
        <div>
            <h1> Employee Details</h1>
            <h2> First Name : {firstName} </h2>
            <h2> Last Name : {lastName} </h2>
            <h2> Eamil Id : {emailId} </h2>
        </div>
    )
}

The second way is destructuring props in the function body:

import React from 'react'

export const Employee = props => {
    const {firstName, lastName, emailId} = props;
    return (
        <div>
            <h1> Employee Details</h1>
            <h2> First Name : {firstName} </h2>
            <h2> Last Name : {lastName} </h2>
            <h2> Eamil Id : {emailId} </h2>
        </div>
    )
}

Destructuring props in class Components

Let's first see without destructuring how our code looks like:

import React, { Component } from 'react'

class Employee extends Component {
    render() {

        return (
           <div>
                <h1> Employee Details</h1>
                <h2> First Name : {this.props.firstName} </h2>
                <h2> Last Name : {this.props.lastName} </h2>
                <h2> Eamil Id : {this.props.emailId} </h2>
            </div>
        )
    }
}

export default Employee;

Now, let's destructure our props so that we can get rid of this.props in front of each props. 

In class components, we destructure props in the render() function:

import React, { Component } from 'react'

class Employee extends Component {
    render() {

        const {firstName, lastName, emailId} = this.props;

        return (
           <div>
                <h1> Employee Details</h1>
                <h2> First Name : {firstName} </h2>
                <h2> Last Name : {lastName} </h2>
                <h2> Eamil Id : {emailId} </h2>
            </div>
        )
    }
}

export default Employee;

Destructuring state 

Destructuring states is similar to props. Here is syntax to Destructuring states in React:

import React, { Component } from 'react'

class StateDemp extends Component {
    render() {

        const {state1, state2, state3} = this.state;

        return (
           <div>
                <h1> State Details</h1>
                <h2> state1 : {state1} </h2>
                <h2> state2 : {state2} </h2>
                <h2> state3 : {state3} </h2>
            </div>
        )
    }
}

export default StateDemo;

What's Next?

In this chapter, we have learned how to destructure props and states in React with an example. In the next chapter, we will learn about the React class component with an example.

---

❮ Previous Chapter Next Chapter ❯