diff --git a/README.md b/README.md
index 258a878..d54d8a2 100644
--- a/README.md
+++ b/README.md
@@ -2,11 +2,16 @@
 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
- * 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
+ X Add a new class component for Reviews
+ X Make sure to use extends and super
+ X Import and use this component in ProductDetail
+
+ X This component will take a product from props
+
+ X It will show the number of reviews followed by "review" or "reviews" depending on if there is one or more reviews
+
+ X It will create a list of the reviews description which will initially be hidden
+
+ X When the word "review" is clicked show the reviews
+
+ X When clicked again, hide the reviews
diff --git a/src/App.js b/src/App.js
index 8dfa97f..c5a864e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,11 +5,13 @@ 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} />;
+  const products = props.state.products.map(function(prod) {
+    return <ProductDetail product={prod} key={prod.id} />;
     });
+
     return (
           <div className="App">
             <NavBar />
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index 885919a..91c3608 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,11 +1,19 @@
 import React from "react";
+//import ReactDOM from 'react-dom';
+import Reviews from './Reviews';
 
 function ProductDetail(props) {
-  const {name,description,rating,imgUrl} = props.product;
+  const {id,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} />);
   }
+  const reviewDivs = [];
+  for (let i = 0; i < reviews.length; i++) {
+    console.log(reviews[i].description);
+    reviewDivs.push(<p key={`review_${i}_for${id}`} > {reviews[i].description} - Rating:  {reviews[i].rating}</p>);
+  }
+  const reviewQuantity = reviews.length;
 
   return (
     <div className="col-sm-4 col-lg-4 col-md-4">
@@ -14,16 +22,19 @@ 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>
+          </div>
+          <div className="ratings">
+            <Reviews
+            reviews={reviews}
+            reviewDivs={reviewDivs}
+            reviewQuantity={reviewQuantity} />
+          </div>
           <p>
             {stars}
           </p>
         </div>
-      </div>
     </div>
   );
 }
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
new file mode 100644
index 0000000..f28e4de
--- /dev/null
+++ b/src/components/Reviews.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class Reviews extends React.Component{
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+    };
+  }
+
+  handleReviewsClick = (e) => {
+    console.log("review clicked");
+    console.log(e.target);
+    this.setState({visible: !this.state.visible});
+  }
+
+  render(){
+    console.log(this.props.reviewDivs);
+    let displayReviewDivs = "";
+    let displayReviewQuantity = `${this.props.reviewQuantity} Reviews`;
+
+    if (this.props.reviewDivs.length < 2){
+      displayReviewQuantity = `${this.props.reviewQuantity} Review`
+    }
+
+    if (!this.state.visible) {
+      displayReviewDivs = <div></div>
+    }
+    else {
+      displayReviewDivs = <div>{this.props.reviewDivs}</div>
+    }
+    return(
+      <p className="pull-right">
+        <span onClick={this.handleReviewsClick}>
+          {displayReviewQuantity}
+          {displayReviewDivs}
+        </span>
+      </p>
+
+    );
+  }
+};
+
+export default Reviews;
diff --git a/src/state.js b/src/state.js
index badf378..b0f4951 100644
--- a/src/state.js
+++ b/src/state.js
@@ -1,10 +1,14 @@
+// changed first occurence of products.reviews to products.reviewers,
+// to avoid duplicate product.reviews(number) and product.reviews(object),
+// same level
+
 export default {
   categories:["food","electronics","sporting"],
   products:[{
     "id": 1,
     "name": "Body Luxuries Sweet Lavender Hand Sanitizer",
     "description": "Psychotropic drugs, not elsewhere classified",
-    "reviews": 46,
+    "reviewers": 46,
     "rating": 2,
     "imgUrl": "http://dummyimage.com/136x167.bmp/cc0000/ffffff",
     "price": "$95.11",
@@ -44,7 +48,7 @@ export default {
     "id": 2,
     "name": "Topiramate",
     "description": "Injury of ulnar nerve at forearm level, left arm, sequela",
-    "reviews": 2,
+    "reviewers": 2,
     "rating": 2,
     "imgUrl": "http://dummyimage.com/125x134.jpg/cc0000/ffffff",
     "price": "$37.09",
@@ -70,7 +74,7 @@ export default {
     "id": 3,
     "name": "Almond",
     "description": "Other disorders of continuity of bone, unsp tibia and fibula",
-    "reviews": 27,
+    "reviewers": 27,
     "rating": 5,
     "imgUrl": "http://dummyimage.com/149x190.jpg/dddddd/000000",
     "price": "$51.83",
@@ -90,7 +94,7 @@ export default {
     "id": 4,
     "name": "VYTORIN",
     "description": "Orchard as the place of occurrence of the external cause",
-    "reviews": 60,
+    "reviewers": 60,
     "rating": 3,
     "imgUrl": "http://dummyimage.com/162x153.jpg/cc0000/ffffff",
     "price": "$86.93",
@@ -110,7 +114,7 @@ export default {
     "id": 5,
     "name": "Decolorized Iodine",
     "description": "Injury",
-    "reviews": 20,
+    "reviewers": 20,
     "rating": 1,
     "imgUrl": "http://dummyimage.com/120x245.jpg/cc0000/ffffff",
     "price": "$70.10",
@@ -130,7 +134,7 @@ export default {
     "id": 6,
     "name": "Fresh Sugar Honey Tinted Lip Treatment SPF15",
     "description": "Unspecified open wound ",
-    "reviews": 79,
+    "reviewers": 79,
     "rating": 3,
     "imgUrl": "http://dummyimage.com/211x227.bmp/5fa2dd/ffffff",
     "price": "$39.25",
@@ -150,7 +154,7 @@ export default {
     "id": 7,
     "name": "LBel",
     "description": "Toxic effect of 2-Propanol, intentional self-harm, init",
-    "reviews": 76,
+    "reviewers": 76,
     "rating": 3,
     "imgUrl": "http://dummyimage.com/212x144.jpg/ff4444/ffffff",
     "price": "$99.91",
@@ -170,7 +174,7 @@ export default {
     "id": 8,
     "name": "Cholestyramine",
     "description": "Laceration without foreign body of trachea, sequela",
-    "reviews": 74,
+    "reviewers": 74,
     "rating": 3,
     "imgUrl": "http://dummyimage.com/204x175.jpg/5fa2dd/ffffff",
     "price": "$67.17",
@@ -190,7 +194,7 @@ export default {
     "id": 9,
     "name": "Risperidone",
     "description": "Poisn by cephalospor/oth beta-lactm antibiot, undet, sequela",
-    "reviews": 9,
+    "reviewers": 9,
     "rating": 1,
     "imgUrl": "http://dummyimage.com/212x108.bmp/cc0000/ffffff",
     "price": "$96.84",
@@ -210,7 +214,7 @@ export default {
     "id": 10,
     "name": "MAC",
     "description": "Other Gram-negative sepsis",
-    "reviews": 45,
+    "reviewers": 45,
     "rating": 2,
     "imgUrl": "http://dummyimage.com/189x109.png/cc0000/ffffff",
     "price": "$74.37",
@@ -221,4 +225,4 @@ export default {
     }
   ]
   }]
-}
\ No newline at end of file
+}