Card készítés

randomuser_api/src/components/RandomUser.jsx

@@ -0,0 +1,26 @@
+
+
+function RandomUser({ user }) {
+    return (
+        <div className="card bg-base-100 w-96 shadow-sm">
+            <figure className="px-10 pt-10">
+                <img
+                    src={user.picture.large}
+                    alt={user.name.first}
+                    className="rounded-xl" />
+            </figure>
+            <div className="card-body items-center text-center">
+                <h2 className="card-title">{user.name.title} {user.name.first} {user.name.last}</h2>
+                <p>Phone:{user.phone}</p>
+                <p>Cell:{user.cell}</p>
+                <p>Email:{user.email}</p>
+                
+                <div className="card-actions">
+                    
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default RandomUser

randomuser_api/src/components/RandomUsers.jsx

@@ -2,9 +2,25 @@ import { useState,useEffect } from "react";
 
 function RandomUsers() {
     const[users,setUsers]=useState([]);
+
+    const letolt=()=>{
+        fetch('https://randomuser.me/api/?results=50')
+        .then(res=>res.json())
+        .then(adat=>setUsers(adat.results))
+        .catch(err=>alert(err));
+
+    }
+
+    useEffect(()=>{
+        letolt();
+    },[])
+
   return (
     <div>
         <h2 className="text-2xl text-center font-bold text-green-900 m-5">Felhasználók:</h2>
+        {
+            users.map((user,i)=>(<p key={i}>{user.name.title}{user.name.first}{user.name.last}</p>))
+        }
     </div>
   )
 }