Hello Developers, a very warm welcome to you. Today, we are going to learn a very important topic in ReactJS which is Destructuring Props & State.

Earlier, I have already written an article on Destructuring. So if you are still confused about the term Destructuring, then I'll suggest you to please read that article first. It'll just take 5 minutes. Read it here > Destructuring in JavaScript

In destructuring, it does not change an array or objects.Instead, it create a copy of array or object by assigning them into new variables.

Before Destructuring (ES-5) :

So suppose if you have an array with some elements on it and later if you want to access its items, you had to create separate variables for every separate element. Here in our case, we used std1,std2, and std3 to access values Adil, Kumar, and Zain respectively. This is what we used to do before the ES-6 Version.

Now let's see how we can access the value of Array after ES-6 Destructuring Concepts :

After Destructuring (ES-6) :

Have you noticed the magic ? Now, in just a single line, we have stored our array elements in a separate variables.

So you can say that variable std1 = Adil, std2 =Kumar, and std3 = Zain.

This was a simple explanation of Destructuring Array. Now let's move to our main topic which is Destructuring Props and State in React.

Props Destructuring in Functional Component:

Below is our App.js :

import React from 'react'

function App(props) {
  return (
    <>
        <h1>My name is {props.name}</h1>
        <h2>My age is {props.age}</h2>

    </>
  )
}

export default App;

Here we are using Props so I hope you are also aware about it.

• In App.js, we are using props as a parameters becuase we are receiving some data here from our index.js where we call our component.

Below is our Index.js :

import React from 'react';
import ReactDOM from 'react-dom/client';
import App  from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

  <>
  <App name="Ravi" age={23} />
  </>

);

There is nothing rocket science here. We just called our component App.js and passing some attributes (data) as we used to do in our HTML.

Here we are passing two attributes which are name and age. The value of these two attributes gets stored in the parameter of our App component. In App.js, we named it props. So in a nutshell, we can assume that name and age values are stored here.

Here the keyword props is behave like an object.

So from the above code, we can see the output we are getting is :

My name is Ravi

My age is 23

This is just a simple example of props.

Now let's see the First method to destructure the props :

• In our App.js file, remove the word props from the parameter and add {} curly brackets, and put the name of our attributes which are name and age that we passed from our Index.js file.

import React from 'react'

function App({name,age}) {
  return (
    <>
        <h1>My name is {name}</h1>
        <h2>My age is {age}</h2>

    </>
  )
}

export default App ;

• The main advantage of removing props from our parameters is that we can eliminate props.name and props.age and instead we only write, name and age. You'll get the same output. Here, we can say that we destructure our props.

Now let's see the Second method to destructure the props :

Below is our App.js File :

import React from 'react'

function App(props) {

    const {name,age} = props

  return (
    <>
        <h1>My name is {name}</h1>
        <h2>My age is {age}</h2>

    </>
  )
} 

export default App

• If you notice just below our function App, we destruct our props object and create two variables which are name and age.

  Keep in mind that the variables names should be same as our attributes which we passed in our Index.js file.

Props Destructuring in Class component :

So far we have seen the concept of destructuring in only in Functional Components.Now let's see how we can achieve the same thing with our Class Based Components.

Below is our App.js File :

import React from 'react'

export default class App extends React.Component {
  render() {

    const {name,age} = this.props

    return (
      <>

       <h1>My name is {name}</h1>
        <h2>My age is {age}</h2>

      </>
    )
  }
}

• Here, we also destructure our props just after render() method but this time we used this.props keyword to destructure the props object.

So far we have seen that how can we destruture props in both Functional and Class Components. Now let's see our last topic which is destruture state in class component.

State Destructuring in Class component :

Below is our Index.js File :

import React from 'react';
import ReactDOM from 'react-dom/client';
import App  from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

  <>
  <App/>
  </>

);

Here we are not passing any data from Index.js as we are dealing with state,not with props.

Below is our App.js File :

import React from 'react'

export default class App extends React.Component {

    constructor()
    {
        super();
        this.state={
            name:"Kat",
            age :25
        }
    }

  render() {
    const {name,age} = this.state
    return (
      <>

       <h1>My name is {name}</h1>
        <h2>My age is {age}</h2>

      </>
    )
  }
}

Here,we created a state and store some data inside it which is name and age.

• If you notice in the above file, just after render() method, we have destrucutre our state.

  const {name,age} = this.state
  

  And the output, we are getting is :

My name is Kat

My age is 25

We won't do state destructuring in our Functional Based Component because we only use state concept in Class Based Components.

I hope, you must have learnt someting new and special. If you really love ❤️ this article, please hit a like ✅ or drop a comment. I'll keep posting the articles related to JavaScript and Front End development.