From 1384bef542740402287eff46c14d30d461471901 Mon Sep 17 00:00:00 2001
From: ahornbeck268 <ahornbeck268@gmail.com>
Date: Fri, 14 Jul 2017 13:41:06 -0500
Subject: [PATCH] prop practice done

---
 src/App.js               | 40 ++++++++++++++++++++--------------------
 src/components/Child.js  |  3 +--
 src/components/Parent.js | 32 ++++++++++++++++----------------
 3 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/src/App.js b/src/App.js
index 2fe6d64..5422cf1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,7 +3,7 @@ import "./App.css";
 import PropTypes from "prop-types";
 import SuperComponent from "./components/SuperComponent";
 import Parent from "./components/Parent";
-
+// import "./state.js";
 /* eslint-disable no-unused-vars, no-console */
 function App(props) {
   const product = {
@@ -14,51 +14,51 @@ function App(props) {
   return (
     <div>
       {/* send in a prop called "message", give it the string "Hello World" */}
-      <div>This better say "Hello World": <SuperComponent message={"Hello World"} /> </div>
+      <div>This better say "Hello World": <SuperComponent message="Hello World" /> </div>
       {/* send in a prop called "message", give it the string "Goodbye World" */}
-      <div>This better say "Goodbye World": <SuperComponent /> </div>
+      <div>This better say "Goodbye World": <SuperComponent message="Goodbye World"/> </div>
       {/* send in a prop called "message", give it the string "Props are awesome" */}
-      <div>This better say "Props are awesome": <SuperComponent /> </div>
+      <div>This better say "Props are awesome": <SuperComponent message="Props are awesome"/> </div>
       {/* send in a prop called "message", give it the string "I totally get this now" */}
-      <div>This better say "I totally get this now": <SuperComponent /> </div>
+      <div>This better say "I totally get this now": <SuperComponent message="I totally get this now"/> </div>
 
 
       {/* send in a prop called "magicNumber", give it the number 42*/}
-      <div>This better say 42: <SuperComponent /> </div>
+      <div>This better say 42: <SuperComponent magicNumber={42}/> </div>
       {/* send in a prop called "magicNumber", give it the number 21*/}
-      <div>This better say 21: <SuperComponent /> </div>
+      <div>This better say 21: <SuperComponent magicNumber={21}/> </div>
 
 
       {/* send in a prop called "product", give it the variable product*/}
-      <div>This better say "ajax": <SuperComponent /> </div>
+      <div>This better say "ajax": <SuperComponent product={product}/> </div>
       {/* send in a prop called "product", give it an object with a name property "pepsi"*/}
-      <div>This better say "pepsi": <SuperComponent /> </div>
+      <div>This better say "pepsi": <SuperComponent product={{name: "pepsi"}}/> </div>
       {/* send in a prop called "product", give it an object with a name property "nike"*/}
-      <div>This better say "nike": <SuperComponent /> </div>
+      <div>This better say "nike": <SuperComponent product={{name:"nike"}}/> </div>
 
 
       {/* send in a prop called "names", give it the variable names*/}
-      <div>This better say "Bob, Stand, Todd, Ted" : <SuperComponent /> </div>
+      <div>This better say "Bob, Stand, Todd, Ted" : <SuperComponent names={names}/> </div>
       {/* send in a prop called "names", give it an array ["Brodie","Alicia","Margo"]*/}
-      <div>This better say "Brodie, Alicia, Margo" : <SuperComponent /> </div>
+      <div>This better say "Brodie, Alicia, Margo" : <SuperComponent names={['Brodie','Alicia','Margo']}/> </div>
       {/* send in a prop called "names", give it an array ["Titus","Axel","Claire"]*/}
-      <div>This better say "Titus, Axel, Claire" : <SuperComponent /> </div>
+      <div>This better say "Titus, Axel, Claire" : <SuperComponent names={['Titus', 'Axel', 'Claire']}/> </div>
 
       {/* Use App's props*/}
       {/* send in a prop called "products", give it the products array from App's props*/}
-      <div>This better say "Hand Sanitizer": <SuperComponent /> </div>
+      <div>This better say "Hand Sanitizer": <SuperComponent products={props.products}/> </div>
       {/* send in a prop called "names", give it the names array from App's props*/}
-      <div>This better say "Robin, Lily, Barney": <SuperComponent /> </div>
+      <div>This better say "Robin, Lily, Barney": <SuperComponent names={props.names} /> </div>
       {/* send in a prop called "magicNumber", give it the magicNumber from App's props*/}
-      <div>This better say "99": <SuperComponent /> </div>
+      <div>This better say "99": <SuperComponent magicNumber={props.magicNumber}/> </div>
       {/* send in a prop called "message", give it the contact.firstName from App's props*/}
-      <div>This better say "Luke": <SuperComponent /> </div>
+      <div>This better say "Luke": <SuperComponent message={props.contact.firstName}/> </div>
       {/* send in a prop called "message", give it the contact.lastName from App's props*/}
-      <div>This better say "Skywalker": <SuperComponent /> </div>
+      <div>This better say "Skywalker": <SuperComponent message={props.contact.lastName}/> </div>
       {/* send in a prop called "message", give it the contact.occupation from App's props*/}
-      <div>This better say "farmer": <SuperComponent /> </div>
+      <div>This better say "farmer": <SuperComponent message={props.contact.occupation}/> </div>
       {/* send in a prop called "message", give it the contact.address from App's props*/}
-      <div>This better say "300 MiddleOfNoWhere st Tatooine": <SuperComponent /> </div>
+      <div>This better say "300 MiddleOfNoWhere st Tatooine": <SuperComponent message={props.contact.address}/> </div>
       <Parent />
     </div>
   );
diff --git a/src/components/Child.js b/src/components/Child.js
index a9276f7..8c56c3d 100644
--- a/src/components/Child.js
+++ b/src/components/Child.js
@@ -15,7 +15,7 @@ function Child(props) {
       street: "101 main st"
       city:"Austin",
       zip: "78741"
-      
+
     }
 
   }
@@ -39,4 +39,3 @@ function Child(props) {
 
 
 export default Child;
-
diff --git a/src/components/Parent.js b/src/components/Parent.js
index 6cfbdb0..b84f9c5 100644
--- a/src/components/Parent.js
+++ b/src/components/Parent.js
@@ -6,33 +6,33 @@ function Parent(props) {
 
   return (
     <div>
-      {/* 
+      {/*
         Child is just a function as you can obviously see from the code of Child.js
         We should understand how functions work else we are in big trouble
-        How many times can you call a function?
-        What can you send into functions as arguments?
-        How do you call a function?
-        How do you pass arguments into a functoin?
-        Using a component in JSX is the same as calling the function 
+        How many times can you call a function?---up to you!
+        What can you send into functions as arguments?---whatever u need to!
+        How do you call a function?--fnc()
+        How do you pass arguments into a function? ---fnc(pass, args, here)
+        Using a component in JSX is the same as calling the function
       */}
 
       <Child name={"Bob"} />
-      {/* 
+      {/*
         React converts the above into:
 
         var props = {name:"Bob"};
-        Child(props)  
+        Child(props)
       */}
-      
 
 
-      {/* 
+
+      {/*
         var props = {age:33};
-        Child(props)  
+        Child(props)
       */}
       <Child age={33} />
 
-      {/* 
+      {/*
         var props = {
           address:{
             street:"325 aca rd.",
@@ -40,7 +40,7 @@ function Parent(props) {
             zip: "78701"
           }
           };
-        Child(props)  
+        Child(props)
       */}
       <Child address={{
         street: "325 aca rd.",
@@ -48,7 +48,7 @@ function Parent(props) {
         zip: "78701"
       }} />
 
-      {/* 
+      {/*
         var props = {
           name: "Ted",
           age: 35,
@@ -58,11 +58,11 @@ function Parent(props) {
             zip: "78701"
           }
           };
-        Child(props)  
+        Child(props)
       */}
       <Child
         name={"Ted"}
-        age={35} 
+        age={35}
         address={{
           street: "325 aca rd.",
           city: "Austin",