Assignment Completed

src/App.js

@@ -87,7 +87,7 @@ const App = () => {
   return (
     <div>
       <h1 className="title">BD Store</h1>
-      <Products  />
+      <Products products={products} />
     </div>
   );
 };

src/components/Product.js

@@ -1,15 +1,15 @@
-/* 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="" />
+    <article className="product">
+      <img src={image} alt="" />
       <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,15 @@
-/* eslint-disable react/prop-types */
+import React from 'react';
+import Product from './Product';
+
+function Products(props) {
+  const { products } = props;
+  return (
+    <div className="products">
+      {products.map((product) => (
+        <Product key={product.id} product={product} />
+      ))}
+    </div>
+  );
+}
+
+export default Products;

src/index.css

@@ -57,8 +57,7 @@ img {
   display: flex;
   flex-direction: column;
 }
-.product__img {
-}
+
 .product__details {
   padding: 0.5rem;
   display: flex;