🧱 Destructuring Props and State

Destructuring Props and State

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>
   );

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()
+// }

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>
     );

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>
     );
   }