De-Structuring Props & State In React JS

In this blog, you are going to learn de-structuring of props and state in react js. this is a very important concept of React JS.

What is Destructuring In React JS ?

• Destructuring is a characteristic of JavaScript, It is used to take out sections of data from an array or objects, We can assign them to new own variables created by the developer.
• In destructuring, It does not change an array or any object, it makes a copy of the desired object or array element by assigning them in its own new variables, later we can use this new variable in React (class or functional) components.

Destructing Arrays In JavaScript – Old Way

const students = [‘Adil', ‘Kumar', ‘Zain'];

// old way – Without Destructuring
const std1 = students[0];
const std2 = students[1];
const std3 = students[2];

Destructing Arrays In JavaScript – With Destructuring

const students = [‘Adil', ‘Kumar', ‘Zain'];

// With Destructuring
const [std1, std2, std3] = students;

Advantages of Destructuring

• It makes developer’s life easy, by assigning their own variables.
• It improves the sustainability, readability of code.
• It helps to cut the amount of code used in an application.
• It trims the number of steps taken to access data properties.
• It provides components with the exact data properties.
• It saves time from iterate over an array of objects multiple times.

Customer.js Component File – Source Code

// import React from 'react'

import React, { Component } from 'react'

class Customer extends Component {
    constructor() {
        super()
        this.state = {
            name: "Kumar",
            age: 27
        }
    }
    render() {
        const { name, age } = this.state
        return (
            <div>
                <h1>{name}</h1>
                <h1>{age}</h1>
            </div>
        )
    }
}


// class Customer extends Component {
//     render() {
//         const { name, age } = this.props
//         return (
//             <div>
//                 <h1>{name}</h1>
//                 <h1>{age}</h1>
//             </div>
//         )
//     }
// }


// function Customer({name, age}) {
//   return (
//     <div>
//       <h1>{name}</h1>
//       <h1>{age}</h1>
//     </div>
//   )
// }

// function Customer(props) {
//     const {name, age} = props
//     return (
//       <div>
//         <h1>{name}</h1>
//         <h1>{age}</h1>
//       </div>
//     )
//   }

export default Customer

Index.js Component File – Source Code

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Employee from './Employee';
import Customer from './Customer';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <Customer name="Zain" age={25}/>
    </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Download Notes & Source Code Of This Blog From The Link Given Below

https://www.mediafire.com/file/pje0kxmvfq32yby/DE+STRUCTURING+PROPS+STATE+React+JS.rar/file