From 0cb64808bd6dc2811cf5df5f0be2d79a3af94107 Mon Sep 17 00:00:00 2001
From: Jordon R <reese.jordon@gmail.com>
Date: Mon, 5 Feb 2018 18:26:49 -0600
Subject: [PATCH] created component, passed props, displayed information,
 reviews is clickable.

---
 README.md                       |  2 +-
 src/App.js                      |  2 +-
 src/components/ProductDetail.js |  9 ++++---
 src/components/Reviews.js       | 43 +++++++++++++++++++++++++++++++++
 4 files changed, 50 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Reviews.js

diff --git a/README.md b/README.md
index 4bb0678..3773f9a 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,6 @@ Fork, clone, run yarn install, yarn start, pull request
  * Import and use this component in ProductDetail
  * This component will take a product from props
  * It will show the number of reviews followed by "review" or "reviews" depending on if there is one or more reviews
- * It will create a list of the reviews description which will inititally be hidden
+ * It will create a list of the reviews description which will initially be hidden
  * When the word "review" is clicked show the reviews
  * When clicked again, hide the reviews
diff --git a/src/App.js b/src/App.js
index 8dfa97f..d37bf15 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,7 +8,7 @@ import Carousel from './components/Carousel';
 function App (props) {
 
     var products = props.state.products.map(function(prod){
-        return <ProductDetail product={prod} />;
+        return <ProductDetail key={prod.id} product={prod} />;
     });
     return (
           <div className="App">
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index 885919a..5591295 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,10 +1,11 @@
 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" />);
+    stars.push(<span className="glyphicon glyphicon-star" key={i}/>);
   }
 
   return (
@@ -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 reviews={reviews}/>
           <p>
             {stars}
           </p>
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
new file mode 100644
index 0000000..0d6036e
--- /dev/null
+++ b/src/components/Reviews.js
@@ -0,0 +1,43 @@
+import React from "react";
+
+class Reviews extends React.Component {
+  constructor(){
+    super();
+    this.state = {
+      visible: false
+    }
+
+    this.numOfReviews = "";
+    this.reviewList = [];
+  }
+
+  handleReviewClick = ()=> {
+    if(this.state.visible) {
+      this.reviewList = [];
+    } else {
+      this.reviewList = this.props.reviews.map((review, indx) => {
+        return <li key={indx}>{review.description}</li>
+      })
+    }
+    this.setState({visible:!this.state.visible});
+  }
+
+      render() {
+          if (this.props.reviews.length === 1) {
+            this.numOfReviews = <p onClick={this.handleReviewClick}>1 <a>review</a></p>;
+          } else {
+            this.numOfReviews = <p onClick={this.handleReviewClick}>{this.props.reviews.length} <a>reviews</a></p>;
+          }
+        return(
+          <div>
+            {this.numOfReviews}
+            <ol>
+              {this.reviewList}
+            </ol>
+          </div>
+      );
+    }
+  }
+
+
+export default Reviews;