Morgan.Dean.ATX.Advanced2

public/css/shop-homepage.css

@@ -51,4 +51,4 @@ body {
 
 footer {
     margin: 50px 0;
-}
+}

src/components/ProductDetail.js

@@ -1,7 +1,8 @@
 import React from "react";
+import Reviews from "./Reviews.js";
 
 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,14 +15,18 @@ 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>
-          <p>
-            {stars}
+        <div className="ratings" >
+        <p>
+          {stars}
+        </p>
+          <p >
+          <Reviews products={reviews}/>
+
           </p>
+
         </div>
       </div>
     </div>

src/components/Reviews.js

@@ -0,0 +1,61 @@
+import React from "react";
+
+class Reviews extends React.Component {
+    constructor(props) {
+      super();
+      this.state = {
+        visible: false,
+      };
+
+    }
+    render() {
+      function fillStars(value) {
+        var arr = [];
+        for (var i = 0; i < value; i++) {
+          arr.push( < span className = "glyphicon glyphicon-star" > < /span>)
+          }
+          return arr;
+        };
+        let reviewState = this.props.products;
+        let reviewDiv = "";
+        let reviewTag;
+        if (reviewState.length > 1) {
+          reviewTag = "Reviews";
+        } else {
+          reviewTag = "Review"
+        }
+
+
+        if (this.state.visible) {
+          reviewDiv = reviewState.map(function(type, index) {
+            return (
+              <div >
+
+                <hr / >
+                <p key = {index} > {type.description} </p>
+                <p>{fillStars(type.rating)} </p >
+
+              </div>
+            );
+          })
+        } else {
+          reviewDiv = "";
+        }
+
+        return (
+          <div >
+          <a onClick = {(e) => {
+              this.setState({
+                visible: !this.state.visible
+              });
+            }
+          } > {reviewTag} < /a>
+          {reviewDiv}
+          </div>
+        );
+
+      }
+    }
+
+
+    export default Reviews;