create, style product component & mapping products data

src/App.js

@@ -84,10 +84,12 @@ const products = [
 ];
 
 const App = () => {
+
   return (
     <div>
       <h1 className="title">BD Store</h1>
-      <Products  />
+      <Products products={products}  />
+
     </div>
   );
 };

src/components/Product.js

@@ -1,15 +1,16 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
-const Product = () => {
+const Product = (props) => {
+  const {image,title,price,rating,description} = props.product;
   return (
       <article className="product">
-      <img src="" alt="" />
+      <img src={image} alt={title} />
       <div className="product__details">
-        <h4 className="product__title">product title</h4>
-        <p>Price: $ product price</p>
-        <p>Rating: product rating rate/5</p>
-        <p className="product__desc">Description: product.description</p>
+        <h4 className="product__title">{title}</h4>
+        <p className='product__price'>Price: ${price}</p>
+        <p className='product__rating'>Rating: {rating['rate']}/5</p>
+        <p className="product__desc">Description: {description}</p>
         <button className="product__btn btn">Add to cart</button>
       </div>
     </article>

src/components/Products.js

@@ -1 +1,16 @@
 /* eslint-disable react/prop-types */
+import React from 'react';
+import Product from './Product';
+
+const Products = (props) => {
+  const {products} = props;
+  const product = products.map(product =>
+    <Product key={product.id} product={product} />)
+  return (
+    <section className='products'>
+      {product}
+    </section>
+  );
+};
+
+export default Products;