Сделали дочерние компоненты и свойства

db.json

@@ -2,14 +2,14 @@
     "products": [
         {
             "id":1,
-            "name":"Sneakers Red & White 2025",
+            "name":"Кросовки Red & White 2025",
             "brand":"NIKE",
             "price":38.0,
             "imageUrl":"./assets/images/sneakers-image.jpg"
         },
         {
             "id":2,
-            "name":"Sneakers Red & White 2025",
+            "name":"Кросовки белые 2024",
             "brand":"NIKE",
             "price":40.0,
             "imageUrl":"./assets/images/sneakers-image.jpg"

src/App.jsx

@@ -98,7 +98,7 @@ function ToolTip() {
     return <div ref={ref} style={{height: '40px'}}>Высота: {height}</div>
 }
 
-function Product() {
+function Product({ name, brand, price, url }) {
 	const [isLiked, setIsLiked] = React.useState(false)
     
 	const toggleLike = () => {
@@ -115,7 +115,7 @@ function Product() {
 			<ToolTip />
 			<div className={styles.content}>
 				<div className={styles.title}>
-					<h4>Sneakers Red & White 2025</h4>
+					<h4>{name}</h4>
 					<div className={styles.actions}>
 						<button
 							className={styles.likeButton}
@@ -136,13 +136,28 @@ function Product() {
 						<button onClick={handleAddClick}>+</button>
 					</div>
 				</div>
-				<p className={styles.description}>NIKE</p>
-				<p className={styles.price}>$38.00</p>
+				<p className={styles.description}>{brand}</p>
+				<p className={styles.price}>${price}</p>
 			</div>
 		</div>
 	)
 }
 
+function MyComponent({ children }) {
+    return <div className="wrapper">{children}</div>;
+}
+
+function RowList({ children }) {
+    return (
+        <div className="rowList">
+            {children.map(child => (
+                <div className="row">{child}</div>
+            ))}
+            <p>{React.Children.count(children)}</p>
+        </div>
+    );
+}
+
 function App() {
     const [products,setProducts] = React.useState([]);
     
@@ -154,8 +169,7 @@ function App() {
 	React.useEffect(() => {
         getProducts();
     },[]);
-    
-    
+    console.log({...products});
     return (
 		<>
 			<div className={styles.container}>
@@ -163,19 +177,24 @@ function App() {
 			</div>
 			<div className={styles.container}>
 				<ul className={styles.list}>
-					<li>
-						<Product />
-					</li>
-					<li>
-						<Product />
-					</li>
-					<li>
-						<Product />
-					</li>
+				    {products.map(product => (
+                        <li>
+                            <Product {...product} />
+					    </li>
+                    ))}
 				</ul>
+            <MyComponent>
+                <h4>Заголовок</h4>
+                <p>Привет!</p>
+            </MyComponent>
+            <ol>
+            <RowList>
+                <li>первый</li>
+                <li>второй</li>
+                <li>третий</li>
+            </RowList>
+            </ol>
 			</div>
-            <EffectComponent />
-            <LayoutEffectComponent />
 		</>
 	)
 }