created component, passed props, displayed information, reviews is cl…

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

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">

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>

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;