terminado ej

src/App.tsx

@@ -1,16 +1,31 @@
+import { useEffect, useState } from 'react';
 import './App.css'
 import Alumno from './Components/Alumno'
 
-function App() {
+
+ 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' }}>
-        <div style={{ display: 'flex', flexDirection: 'row' , gap: "1rem"}}>
+             {alumnos.map((x) => (
-            <Alumno />
+                 <Alumno key={x.id} data={x} />
-            <Alumno />
+             ))}
          </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,7 +1,7 @@
-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"
@@ -16,7 +16,19 @@ export default function Alumno(){
                     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