Ampers Abinnet

package.json

@@ -13,4 +13,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.js

@@ -14,44 +14,57 @@ class App extends Component {
     console.log(this.state.bins);
   }
 
+  //count down of 1500 miliseconds for moving the trash?
   startGame() {
     setInterval(() => {
       this.setState( {
         bins: this.getBinsState()
       });
     }, 1500);
   }
-
+  // changes bins state where their state is an array of t/f
   getBinsState() {
     let bins = [];
     for (let i = 0; i < 9; i++){
-      bins.push({ isTrashVisible: (Math.round(Math.random()) ? true : false )});
+      //random generates # 0 to 1 and 0 evaluates to false
+      bins.push({
+        isTrashVisible: (Math.round(Math.random()) ? true : false )
+      });
+
     }
 
     return bins;
   }
 
   onTrashClicked = () => {
-    // Fill this in!
+    this.setState({
+      points: this.state.points + 3
+    });
   }
 
   render() {
     const bins = this.state.bins.map((bin, index) => {
       return (
-        <Trash key={`trash-${index}`} />
+        //doesn't affect props it is just to help react sort this component on this page
+        <Trash key={`trash-${index}`}
+        // this prop is defined by the showTrash key here and accessed in the Trash component via this.props.showTrash
+          showTrash={bin.isTrashVisible}
+          // passing a function onTrashClicked method in props with the key onTrash Clicked that can be called in Trash.js component
+          onTrashClicked={this.onTrashClicked}
+        />
       );
     });
 
     return (
       <div className="App">
-        <section className="overall-data">
-          <h1>Litter Patrol</h1>
-          <h2>Points: { this.state.points }</h2>
-        </section>
-
-        <section className="bins">
-          { bins }
-        </section>
+      <section className="overall-data">
+      <h1>Litter Patrol</h1>
+      <h2>Points: { this.state.points }</h2>
+      </section>
+
+      <section className="bins">
+      { bins }
+      </section>
       </div>
     );
   }

src/components/Trash.js

@@ -3,10 +3,13 @@ import '../App.css';
 import TrashIcon from '../trash.svg';
 
 class Trash extends Component {
+
+//props defined here are put in from app and they are accessed through {this. props.object key defined in the parent component that passed in the info}
   render() {
+    // the && boolean is like a tertinary but with just the true option no else. //use  condition && code to execute (doesnt have to evaluate to true for it to execute only the condition before it on the && it executes b/c of JS magic that execudes html as it evaluates it for boolean condition (&&))
     return (
       <div className="bin">
-        <img src={ TrashIcon } alt="Trash" className="trash"></img>
+      {this.props.showTrash && <img src={TrashIcon} alt="Trash" className="trash" onClick={this.props.onTrashClicked}></img>}
       </div>
     );
   }