terminado ej

src/App.tsx

@@ -1,16 +1,31 @@
+import { useEffect, useState } from 'react';
 import './App.css'
 import Alumno from './Components/Alumno'
 
-function App() {
 
-  return (
-    <>
-        <div style={{ display: 'flex', flexDirection: 'row' , gap: "1rem"}}>
-            <Alumno />
-            <Alumno />
-        </div>
-    </>
-  )
-}
+ function App() {
+     const [loading, setLoading] = useState(true);
+     const [alumnos, setAlumnos] = useState<any[]>([]);
+
+     useEffect(() => {
+         fetch("https://jsonplaceholder.typicode.com/users")
+             .then(res => res.json())
+             .then(data => {
+                 setAlumnos(data);
+                 setLoading(false);
+             })
+             .catch(() => setLoading(false));
+     }, []);
+
+     if (loading) return <div>Cargando...</div>;
+
+     return (
+         <div style={{ display: 'flex', flexDirection: 'row', gap: "1rem", flexWrap: 'wrap' }}>
+             {alumnos.map((x) => (
+                 <Alumno key={x.id} data={x} />
+             ))}
+         </div>
+     );
+ }
 
 export default App

src/Components/Alumno.css

@@ -13,3 +13,7 @@
 .b-verde{
     border-color: green;
 }
+
+p{
+    margin:0;
+}

src/Components/Alumno.tsx

@@ -1,22 +1,34 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import "./Alumno.css"
 
-export default function Alumno(){
+export default function Alumno({data}: {data: any}){
     const [alumno, setAlumno] = useState({ presente: false });
     return (
         <div id="aa"
         className = {`alumno b ${alumno.presente ? "b-rojo" : "b-verde"}`}
         >
             {(alumno.presente === true ? (
-            <p>
-                Presente
-            </p>
+                <p>
+                    Presente
+                </p>
             ) : (
-            <p>
-                Ausente
-            </p>
+                <p>
+                    Ausente
+                </p>
             ))}
-            <button onClick={() =>setAlumno({
+
+            <hr />
+            <div style={{ display: 'flex', flexDirection: 'column', gap:"10px" }}>
+                <p>
+                    Nombre: <b>{data.name}</b>
+                </p>
+                <p>
+                    Usuario: <b>{data.username}</b>
+                </p>
+            </div>
+            <hr />
+
+            <button onClick={() => setAlumno({
                 presente: alumno.presente ? false: true
             })}>
                 toggle