diff --git a/README.md b/README.md
index 258a878..f9a51f8 100644
--- a/README.md
+++ b/README.md
@@ -2,11 +2,11 @@
 Fork, clone, run yarn install, yarn start, pull request
 
 #### Do
- * Add a new class component for Reviews
- * Make sure to use extends and super
- * 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
+ Add a new class component for Reviews
+ Make sure to use extends and super
+ 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
  * When the word "review" is clicked show the reviews
  * When clicked again, hide the reviews
\ No newline at end of file
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index 885919a..df0ddf4 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,4 +1,5 @@
 import React from "react";
+import Reviews from "./Reviews"
 
 function ProductDetail(props) {
   const {name,description,rating,imgUrl} = props.product;
@@ -18,7 +19,7 @@ function ProductDetail(props) {
           </p>
         </div>
         <div className="ratings">
-          <p className="pull-right">15 reviews</p>
+          <Reviews product={props.product}/>
           <p>
             {stars}
           </p>
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
new file mode 100644
index 0000000..dd33870
--- /dev/null
+++ b/src/components/Reviews.js
@@ -0,0 +1,41 @@
+import React from 'react';
+
+class Reviews extends React.Component{
+    constructor(){
+        super();
+        this.state = {
+            hidden: true
+        }
+    }
+    //this component has a product sent in as prop
+
+    toggleHide() {
+        this.setState({hidden: !this.state.hidden});
+    }
+    render(){ 
+        // console.log(this.props.product.reviews);
+        let plural = "";
+        if (this.props.product.reviews.length > 1) {
+            plural = "s";
+        }
+        const reviewsDiv = this.props.product.reviews.map((review)=>{
+                return (
+                    <div>
+                        <p>Description: {review.description}</p>
+                        <p>Rating: {review.rating}</p>
+                    </div>
+                )
+            }
+        );
+    return (    
+        <div>
+            <div className="pull-right" onClick={()=>{
+                    this.toggleHide()
+                }}>{this.props.product.reviews.length} review{plural}</div>
+            
+            {this.state.hidden ? <div /> : reviewsDiv }
+        </div>
+        )
+    }
+}
+export default Reviews;
\ No newline at end of file