diff --git a/src/App.js b/src/App.js
index 8dfa97f..29bdbd5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,8 @@ import NavBar from './components/NavBar';
 import Footer from './components/Footer';
 import ProductDetail from './components/ProductDetail';
 import Carousel from './components/Carousel';
+import reviews from "./components/reviews";
+
 function App (props) {
 
     var products = props.state.products.map(function(prod){
diff --git a/src/components/Carousel.js b/src/components/Carousel.js
index a10b02b..6ed519c 100644
--- a/src/components/Carousel.js
+++ b/src/components/Carousel.js
@@ -1,36 +1,35 @@
 import React, { Component } from 'react';
 
- function Carousel(){
-     return (
-          <div className="row carousel-holder">
-              <div className="col-md-12">
-                  <div id="carousel-example-generic" className="carousel slide" data-ride="carousel">
-                      <ol className="carousel-indicators">
-                          <li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
-                          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
-                          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
-                      </ol>
-                      <div className="carousel-inner">
-                          <div className="item active">
-                              <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
-                          </div>
-                          <div className="item">
-                              <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
-                          </div>
-                          <div className="item">
-                              <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
-                          </div>
-                      </div>
-                      <a className="left carousel-control" href="#carousel-example-generic" data-slide="prev">
-                          <span className="glyphicon glyphicon-chevron-left"></span>
-                      </a>
-                      <a className="right carousel-control" href="#carousel-example-generic" data-slide="next">
-                          <span className="glyphicon glyphicon-chevron-right"></span>
-                      </a>
-                  </div>
-              </div>
+function Carousel() {
+  return (
+    <div className="row carousel-holder">
+      <div className="col-md-12">
+        <div id="carousel-example-generic" className="carousel slide" data-ride="carousel">
+          <ol className="carousel-indicators">
+            <li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
+            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
+            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
+          </ol>
+          <div className="carousel-inner">
+            <div className="item active">
+              <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
+            </div>
+            <div className="item">
+              <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
+            </div>
+            <div className="item">
+              <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
+            </div>
           </div>
-    )
+          <a className="left carousel-control" href="#carousel-example-generic" data-slide="prev">
+              <span className="glyphicon glyphicon-chevron-left"></span>
+          </a>
+          <a className="right carousel-control" href="#carousel-example-generic" data-slide="next">
+              <span className="glyphicon glyphicon-chevron-right"></span>
+          </a>
+        </div>
+          </div>
+    </div>
+  )
 }
 export default Carousel;
-
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index 885919a..3fbbd12 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,7 +1,8 @@
 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" />);
@@ -14,14 +15,16 @@ 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}
           </p>
+          <p>
+            <Reviews products={reviews} />
+          </p>
         </div>
       </div>
     </div>
diff --git a/src/components/StateTests.js b/src/components/StateTests.js
new file mode 100644
index 0000000..5943bb2
--- /dev/null
+++ b/src/components/StateTests.js
@@ -0,0 +1,41 @@
+/* import React from "react";
+ testing code for ways to initiate the state*/
+
+// this.state = is way to handle state with ES6 constructors
+
+/* Code I use in reviews.js */
+
+/* class Reviews extends React.Component {
+  constructor(props) {
+    super();
+    this.state = {
+      submit: false,
+    };
+
+
+   later I call the state with a return statement and use a div
+  return (
+    <div>
+      <a onCLick={() => {
+        this.setState({
+          submit: !this.state.submit});
+      }}>{displayTag}</a>
+      {divReview}
+      </div>
+  }
+}
+
+tested code:
+
+/* if you want use the state right away, better to set to variable*/
+
+/* const submit = false;
+
+this.state.submit = false;
+this.forceUpdate(); update state right away
+
+this.setState({submit: true});
+
+  if(submit) {
+    //code that will use submit
+  }*/
diff --git a/src/components/reviews.js b/src/components/reviews.js
new file mode 100644
index 0000000..080b54a
--- /dev/null
+++ b/src/components/reviews.js
@@ -0,0 +1,54 @@
+import React from "react";
+
+class Reviews extends React.Component {
+  constructor(props) {
+    super();
+    this.state = {
+      submit: false,
+    };
+
+  }
+  render() {
+    function Stars(value) {
+      const arr = [];
+      for (let i = 0; i < value; i++) {
+        arr.push(<span className="glyphicon glyphicon-star"></span>)
+      }
+      return arr;
+    }
+    const stateOfReview = this.props.products;
+    let divReview = "";
+    let displayTag;
+
+    if (stateOfReview.length > 1) { displayTag = "Reviews" }
+    else { displayTag = "Review"; }
+
+    if (this.state.submit) {
+      divReview = stateOfReview.map(function (type, index) {
+        return (
+          <div>
+            <hr />
+            <p key={index}>{type.description}</p><p>{Stars(type.rating)}</p>
+          </div>
+        );
+      });
+    }
+    else {
+      divReview = "";
+    }
+    return (
+      <div>
+        <a onCLick={() => {
+          this.setState({
+            submit: !this.state.submit});
+        }}>{displayTag}</a>
+        {divReview}
+
+      </div>
+    );
+  }
+}
+
+
+
+export default Reviews;
diff --git a/yarn.lock b/yarn.lock
index 5390255..88ac4d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2570,11 +2570,11 @@ got@^5.0.0:
     unzip-response "^1.0.2"
     url-parse-lax "^1.0.0"
 
-graceful-fs@4.1.10:
+graceful-fs@4.1.10, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   version "4.1.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.10.tgz#f2d720c22092f743228775c75e3612632501f131"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+graceful-fs@^4.1.11:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
@@ -4557,14 +4557,10 @@ q-io@1.13.2:
     qs "^1.2.1"
     url2 "^0.0.0"
 
-q@1.4.1:
+q@1.4.1, q@^1.0.1, q@^1.1.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
 
-q@^1.0.1, q@^1.1.2:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
-
 qs@6.4.0, qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"