components composition

vsushko · Dec 18, 2023 · 3e5137c · 3e5137c
1 parent 879a057
commit 3e5137c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 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
@@ -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
@@ -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>
   );
 }