State Practice 1 - Operational, does not yet list all of the reviews …

src/App.js

@@ -5,11 +5,14 @@ import NavBar from './components/NavBar';
 import Footer from './components/Footer';
 import ProductDetail from './components/ProductDetail';
 import Carousel from './components/Carousel';
+
 function App (props) {
 
     var products = props.state.products.map(function(prod){
         return <ProductDetail product={prod} />;
     });
+    console.log("Products:",products);
+
     return (
           <div className="App">
             <NavBar />

src/components/ProductDetail.js

@@ -1,7 +1,8 @@
 import React from "react";
+import Reviews from "./Reviews"
 
 function ProductDetail(props) {
-  const {name,description,rating,imgUrl} = props.product;
+  const {name,description,rating,imgUrl,reviews} = props.product;
   const stars = [];
   for (let i = 0; i < rating; i++) {
     stars.push(<span className="glyphicon glyphicon-star" />);
@@ -14,11 +15,11 @@ function ProductDetail(props) {
         <div className="caption">
           <h4><a href="#">{name}</a>
           </h4>
-          <p>{description} 
+          <p>{description}
           </p>
         </div>
         <div className="ratings">
-          <p className="pull-right">15 reviews</p>
+          <Reviews numberOfReviews = {reviews}/>
           <p>
             {stars}
           </p>

src/components/Reviews.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+//props passed to class component via "this.props"
+ class Reviews extends Component {
+   state = {showing: false};
+
+   render(){
+     let firstReview;
+     if (this.state.showing) {
+        firstReview = <div>{this.props.numberOfReviews[0].description}</div>;
+      } else {
+        firstReview = <div></div>;
+      }
+
+     return(
+       <div>
+         <button onClick={
+             ()=>{
+             console.log("Showing?",this.state.showing);
+             if (this.state.showing === false){
+               let newShow = true;
+               this.setState({showing: newShow});
+             }else if (this.state.showing === true) {
+               let newShow = false;
+               this.setState({showing: newShow});
+             }
+             console.log("First Review:",this.props.numberOfReviews[0].description);
+           }
+         }>{this.props.numberOfReviews.length} Reviews</button>
+         {firstReview}
+       </div>
+     )
+   }
+}
+
+export default Reviews;

src/state.js

@@ -10,7 +10,7 @@ export default {
     "price": "$95.11",
     "category": "food",
     "reviews": [{
-      "description": "architect revolutionary deliverables",
+      "description": "Aarchitect revolutionary deliverables",
       "rating": 2
     }, {
       "description": "orchestrate dynamic schemas",
@@ -50,7 +50,7 @@ export default {
     "price": "$37.09",
     "category": "food",
     "reviews": [{
-      "description": "architect revolutionary deliverables",
+      "description": "Barchitect revolutionary deliverables",
       "rating": 2
     }, {
       "description": "orchestrate dynamic schemas",
@@ -76,7 +76,7 @@ export default {
     "price": "$51.83",
     "category": "food",
      "reviews": [{
-      "description": "architect revolutionary deliverables",
+      "description": "Carchitect revolutionary deliverables",
       "rating": 2
     }, {
       "description": "orchestrate dynamic schemas",
@@ -221,4 +221,4 @@ export default {
     }
   ]
   }]
-}
+}