Feltételes renderelés

dummy_products/src/App.jsx

@@ -1,10 +1,12 @@
 import Header from "./components/Header"
+import Products from "./components/Products"
 
 function App() {
  
   return (
     <div>
       <Header szoveg="Products" />
+      <Products />
     </div>
   )
 }

dummy_products/src/components/Product.jsx

@@ -1,6 +1,6 @@
 
 
-function Product({ product }) {
+function Product({ product,kapcsol }) {
     return (
         <div className="card bg-blue-300 w-96 shadow-sm m-2">
             <figure>
@@ -14,7 +14,7 @@ function Product({ product }) {
                 </h2>
                 <p>{product.description}</p>
                 <div className="card-actions justify-end">
-                    <button className="btn btn-primary">Részletek</button>                    
+                    <button onClick={kapcsol} className="btn btn-primary">Részletek</button>                    
                 </div>
             </div>
         </div>

dummy_products/src/components/ProductDetails.jsx

@@ -0,0 +1,41 @@
+
+
+function ProductDetails({ product,kapcsol }) {
+    return (
+        <div className="card bg-blue-400 w-96 shadow-sm m-2">
+            <figure>
+                <img
+                    src={product.images[0]}
+                    alt={product.title} />
+            </figure>
+            <div className="card-body">
+                <h2 className="card-title">
+                    {product.title}
+
+                    
+                </h2>
+                <div className="flex flex-row justify-end">
+                        Ratings:
+                        {
+                            product.reviews.map((review) =>
+                                (<div className="badge badge-secondary">{review.rating}</div>))
+                        }
+
+                    </div>
+                <p>{product.description}</p>
+                <div className="card-actions justify-end">
+                   
+                    {
+                        product.reviews.map((review) =>
+                            (<div className="badge badge-outline">{review.comment}</div>))
+                    }
+                </div>
+                <div className="card-actions justify-end">
+                    <button onClick={kapcsol} className="btn btn-primary">Részletek</button>                    
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ProductDetails

dummy_products/src/components/ProductRender.jsx

@@ -0,0 +1,25 @@
+import { useState } from "react"
+import ProductDetails from "./ProductDetails";
+import Product from "./Product";
+
+function ProductRender({product}) {
+    const[isOpen,setIsOpen]=useState(false);
+
+    const kapcsol=()=>{
+        //A state előző állapotát felhasználva állítom be az új állapotot
+        setIsOpen(prev=>!prev);
+    }
+
+  return (
+    <div>
+        {
+            isOpen ?
+             <ProductDetails product={product} kapcsol={kapcsol}/> 
+             :
+             <Product product={product} kapcsol={kapcsol}/>
+        }
+    </div>
+  )
+}
+
+export default ProductRender

dummy_products/src/components/Products.jsx

@@ -1,18 +1,40 @@
 import Product from "./Product";
+import ProductRender from "./ProductRender";
 import { useState,useEffect } from "react";
 
 function Products() {
     const[products,setProducts]=useState([]);
     const getProducts=()=>{
-        
+        fetch('https://dummyjson.com/products')
+        .then(res=>res.json())
+        .then(adatok=>setProducts(adatok.products))
+        .catch(err=>alert(err));
     }
+
+    const asyncGetProducts=async ()=>{
+        try {
+            const keres=await fetch('https://dummyjson.com/products');
+            const valasz=await keres.json();
+            setProducts(valasz.products);
+            
+        } catch (error) {
+            alert(error);
+        }
+    }
+
     useEffect(()=>{
-        getProducts();
+        //getProducts();
+        asyncGetProducts();
     },[]);
 
   return (
     <div>
         <h2 className="text-2xl text-center text-blue-300 m-2">Termékek:</h2>
+        <div className="flex flex-row flex-wrap items-center justify-center">
+        {
+            products.map((product)=>(<ProductRender key={product.id} product={product} />))
+        }
+        </div>
     </div>
   )
 }