Diferencias

Muestra las diferencias entre dos versiones de la página.

--- informatica:programacion:javascript:react [2024/03/22 12:10] – [Gestión de eventos] tempwin
+++ informatica:programacion:javascript:react [2024/03/22 12:19] (actual) – [Gestión de estados] tempwin
@@ Línea 119: / Línea 119: @@
 <code javascript>
 import {useState} from "react";
+import {DB} from "../datos";
+import Product from "./product";
 export default function Index() {
-  const [libros, setLibros] = useState()
+  const [libros, setLibros] = useState(DB.libros)
+  const handlePrestar = (id) => () => {
+    const i_libro = libros.findIndex(l => l.id === id)
+    const libro = libros[i_libro]
+    setLibros([
+      ...libros.slice(0, i_libro),
+      {...libro, stock: libro.stock - 1 }
+      ...libros.slice(i_libro + 1)
+    ])
+  }
   return (
     <>
+      <p className="content">A continuación tienes la lista de libros disponibles</p>
+      <div id="gallery">
+        {libros.map(({id, ...libro}) =>
+          <Product key={id} onPrestar={handlePrestar(id)} {...libro} />
+          )}
+       </div>
     </>
   )