diff --git a/README.md b/README.md
index 25e78a5..54485d5 100644
--- a/README.md
+++ b/README.md
@@ -5,13 +5,13 @@ Fork, clone, run yarn install, yarn start, pull request
* Create a component folder to hold component files
* Organize this web page into appropriate components
* ProductDetail - find a div with className="col-sm-4 col-lg-4 col-md-4"
- * Header - find a div with className="navbar-header"
- * Footer - find a footer element
- * Carousel - find a div with className="row carousel-holder"
+
+
+
* The ProductDetail should repesent only one single product
* The ProductDetail should take a prop called product with is an object, and use it to populate price, name, description reviews and stars.
* Make sure each component is in its own file and imported into App.js
* Use the provided data in state.js to dynamically populate information instead of the hard coded html that is there now.
-* In index.js provide App with a prop called "products" sending in the product array
+* In index.js provide App with a prop called "products" sending in the product array
* App should use the product prop and map the array of products into an array of ProductDetail components
* Make the star images represent the number rating from data
diff --git a/src/App.js b/src/App.js
index 4139cab..470d105 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,27 @@
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
+import Header from './ComponentFolder/Header';
+import Footer from './ComponentFolder/Footer';
+import Carousel from './ComponentFolder/Carousel';
+import ProductDetail from './ComponentFolder/ProductDetail';
-function App() {
+function App(props) {
+
+ // MAPPING THROUGH THE PRODUCTS
+ const prodDetails = props.products.map((product, keys) => {
+ return ;
+});
+
+ // WHAT YOURE GOING TO SHOW
return (
+