Day_8

08_Day_States/08_states.md

@@ -334,34 +334,36 @@ class Main extends React.Component {
     super(props)
   }
   render() {
+    const {
+      techs,
+      user,
+      greetPeople,
+      handleTime,
+      changeBackground,
+      count,
+      addOne,
+      minusOne,
+    } = this.props
     return (
       <main>
         <div className='main-wrapper'>
           <p>Prerequisite to get started react.js:</p>
           <ul>
-            <TechList techs={this.props.techs} />
+            <TechList techs={techs} />
           </ul>
-          <UserCard user={this.props.user} />
+          <UserCard user={user} />
           <Button
             text='Greet People'
-            onClick={this.props.greetPeople}
+            onClick={greetPeople}
-            style={buttonStyles}
-          />
-          <Button
-            text='Show Time'
-            onClick={this.props.handleTime}
             style={buttonStyles}
           />
+          <Button text='Show Time' onClick={handleTime} style={buttonStyles} />
           <Button
             text='Change Background'
-            onClick={this.props.changeBackground}
+            onClick={changeBackground}
             style={buttonStyles}
           />
-          <Count
+          <Count count={count} addOne={addOne} minusOne={minusOne} />
-            count={this.props.count}
-            addOne={this.props.addOne}
-            minusOne={this.props.minusOne}
-          />
         </div>
       </main>
     )
@@ -483,7 +485,7 @@ I believe now you have a very good understanding of state. After this, we will u
 
 ### Exercise: Level 2
 
-1[Change Background](../images/08_day_changing_background_exercise.gif)
+![Change Background](../images/08_day_changing_background_exercise.gif)
 
 🎉 CONGRATULATIONS ! 🎉
 

08_Day_States/08_states_boilerplate/src/index.js

@@ -119,34 +119,36 @@ class Main extends React.Component {
     super(props)
   }
   render() {
+    const {
+      techs,
+      user,
+      greetPeople,
+      handleTime,
+      changeBackground,
+      count,
+      addOne,
+      minusOne,
+    } = this.props
     return (
       <main>
         <div className='main-wrapper'>
           <p>Prerequisite to get started react.js:</p>
           <ul>
-            <TechList techs={this.props.techs} />
+            <TechList techs={techs} />
           </ul>
-          <UserCard user={this.props.user} />
+          <UserCard user={user} />
           <Button
             text='Greet People'
-            onClick={this.props.greetPeople}
+            onClick={greetPeople}
-            style={buttonStyles}
-          />
-          <Button
-            text='Show Time'
-            onClick={this.props.handleTime}
             style={buttonStyles}
           />
+          <Button text='Show Time' onClick={handleTime} style={buttonStyles} />
           <Button
             text='Change Background'
-            onClick={this.props.changeBackground}
+            onClick={changeBackground}
             style={buttonStyles}
           />
-          <Count
+          <Count count={count} addOne={addOne} minusOne={minusOne} />
-            count={this.props.count}
-            addOne={this.props.addOne}
-            minusOne={this.props.minusOne}
-          />
         </div>
       </main>
     )

readMe.md

@@ -28,9 +28,9 @@
 |03|[Setting Up](./03_Day_Setting_Up/03_day_setting_up.md)|
 |04|[Components](./04_Day_Component/04_components.md)|
 |05|[Props](./05_Day_Props/05_props.md)|
-|06|[List, Map and Keys](../06_Day_Map_List_Keys/06_map_list_keys.md)|
+|06|[List, Map and Keys](./06_Day_Map_List_Keys/06_map_list_keys.md)|
 |07|[Class Components](./07_Day_Class_Components/07_class_components.md)|
-|08|[States 😞](./08_Day_States/08_states.md)|
+|08|[States](./08_Day_States/08_states.md)|
 |09|[Conditional Rendering 😞]()|
 |10|[Events 😞]()|
 |11|[Forms 😞]()|