From 3e5137ceb7d8019cc086d42bc458a8273728e3b6 Mon Sep 17 00:00:00 2001
From: Vasiliy Sushko <vasiliy.sushko@gmail.com>
Date: Mon, 18 Dec 2023 22:26:03 +0300
Subject: [PATCH] components composition

---
 .../elegant-context-project/src/App.jsx        | 18 +++++++++++++-----
 .../src/components/Shop.jsx                    | 13 ++-----------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/react-the-complete-guide/elegant-context-project/src/App.jsx b/react-the-complete-guide/elegant-context-project/src/App.jsx
index cdbc44f..56536c9 100644
--- a/react-the-complete-guide/elegant-context-project/src/App.jsx
+++ b/react-the-complete-guide/elegant-context-project/src/App.jsx
@@ -1,8 +1,10 @@
-import { useState } from 'react';
+import { useState } from "react";
 
-import Header from './components/Header.jsx';
-import Shop from './components/Shop.jsx';
-import { DUMMY_PRODUCTS } from './dummy-products.js';
+import Header from "./components/Header.jsx";
+import Shop from "./components/Shop.jsx";
+import Product from "./components/Product.jsx";
+
+import { DUMMY_PRODUCTS } from "./dummy-products.js";
 
 function App() {
   const [shoppingCart, setShoppingCart] = useState({
@@ -71,7 +73,13 @@ function App() {
         cart={shoppingCart}
         onUpdateCartItemQuantity={handleUpdateCartItemQuantity}
       />
-      <Shop onAddItemToCart={handleAddItemToCart} />
+      <Shop>
+        {DUMMY_PRODUCTS.map((product) => (
+          <li key={product.id}>
+            <Product {...product} onAddToCart={handleAddItemToCart} />
+          </li>
+        ))}
+      </Shop>
     </>
   );
 }
diff --git a/react-the-complete-guide/elegant-context-project/src/components/Shop.jsx b/react-the-complete-guide/elegant-context-project/src/components/Shop.jsx
index a7a0d7f..c17a887 100644
--- a/react-the-complete-guide/elegant-context-project/src/components/Shop.jsx
+++ b/react-the-complete-guide/elegant-context-project/src/components/Shop.jsx
@@ -1,18 +1,9 @@
-import { DUMMY_PRODUCTS } from '../dummy-products.js';
-import Product from './Product.jsx';
-
-export default function Shop({ onAddItemToCart }) {
+export default function Shop({ children }) {
   return (
     <section id="shop">
       <h2>Elegant Clothing For Everyone</h2>
 
-      <ul id="products">
-        {DUMMY_PRODUCTS.map((product) => (
-          <li key={product.id}>
-            <Product {...product} onAddToCart={onAddItemToCart} />
-          </li>
-        ))}
-      </ul>
+      <ul id="products">{children}</ul>
     </section>
   );
 }