From 502b59a4fd9966d031ebc86cfd56ae66a2dec23f Mon Sep 17 00:00:00 2001
From: SaishJ <saishjagtap0003@gmail.com>
Date: Mon, 22 Aug 2022 12:43:53 +0530
Subject: [PATCH] :bricks: Destructuring Props and State

Destructuring Props and State
---
 src/App.js                | 14 +++++++-------
 src/components/Greet.js   | 20 +++++++++++++++++---
 src/components/Message.js |  3 ++-
 src/components/Welcome.js |  7 +++++--
 4 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/App.js b/src/App.js
index b2feaad..385d192 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,16 +8,16 @@ import Counter from "./components/counter";
 function App() {
   return (
     <div className="App">
-      <Counter />
-      {/* <Message /> */}
+      {/* <Counter /> */}
+      <Message />
       {/* Functional Components props */}
-      {/* <Greet name="Saish" nickName="SJ" />
-      <Greet name="Pratik" nickName="PZ" />
+      <Greet name="Saish" nickName="SJ" />
+      {/* <Greet name="Pratik" nickName="PZ" />
       <Greet name="Prafulla" nickName="Papya" /> */}
       {/* Class Component props */}
-      {/* <Welcome name="Shivam" nickName="SA">
-        <button>Click Me</button>
-      </Welcome> */}
+      <Welcome name="Shivam" nickName="SA">
+        {/* <button>Click Me</button> */}
+      </Welcome>
       {/* <Hello /> */}
     </div>
   );
diff --git a/src/components/Greet.js b/src/components/Greet.js
index d87cff1..a990622 100644
--- a/src/components/Greet.js
+++ b/src/components/Greet.js
@@ -1,14 +1,28 @@
 import React from "react";
 
-const Greet = (props) => {
-  console.log(props);
+const Greet = ({ name, nickName }) => {
+  //Destructure prop in function parameter.
+
+  // const { name, nickName } = props;  //Destructure prop in function body.
   return (
     <div>
       <h1>
-        Hello {props.name} a.k.a {props.nickName}
+        Hello {name} a.k.a {nickName}
       </h1>
     </div>
   );
 };
 
 export default Greet;
+
+// Destructure prop in function component.
+// 1) pass prop in function parameter
+// const Greet = ({name, nickName}) => {
+//   return()
+// }
+
+// 2) pass prop in function body
+// const Greet =(props) => {
+//   const (name, nickName) = props;
+//   return()
+// }
diff --git a/src/components/Message.js b/src/components/Message.js
index cc436e8..2f564d9 100644
--- a/src/components/Message.js
+++ b/src/components/Message.js
@@ -15,9 +15,10 @@ class Message extends Component {
   }
 
   render() {
+    const { Message } = this.state; //Destructure state.
     return (
       <div>
-        <h1>{this.state.Message}</h1>
+        <h1>{Message}</h1>
         <button onClick={() => this.changeMessage()}>Click Me</button>
       </div>
     );
diff --git a/src/components/Welcome.js b/src/components/Welcome.js
index bb83cef..e4977fc 100644
--- a/src/components/Welcome.js
+++ b/src/components/Welcome.js
@@ -2,10 +2,13 @@ import React, { Component } from "react";
 
 class Welcome extends Component {
   render() {
+    const { name, nickName } = this.props;
     return (
       <div>
-        <h1>Hello {this.props.name}</h1>
-        {this.props.children}
+        <h1>
+          Hello {name} a.k.a {nickName}
+        </h1>
+        {/* {this.props.children} */}
       </div>
     );
   }