Diferencias

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

--- informatica:programacion:javascript:react [2024/03/22 10:42] – [Eventos] tempwin
+++ informatica:programacion:javascript:react [2024/03/22 12:19] (actual) – [Gestión de estados] tempwin
@@ Línea 7: / Línea 7: @@
 ===== Resumen =====
-  * La sintaxis JSX permite escribir código como si fuese HTML.
+==== Sintaxis JSX ====
+La sintaxis JSX permite escribir código como si fuese HTML.
 Sin JSX:
@@ Línea 110: / Línea 112: @@
 }
 </code>
+==== Gestión de estados ====
+Uso de //hooks//:
+<code javascript>
+import {useState} from "react";
+import {DB} from "../datos";
+import Product from "./product";
+export default function Index() {
+  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>
+    </>
+  )
+}
+</code>
+  * ''libros'': guarda el estado del componente.
+  * ''setLibros'': función que nos permite modificar el estado del componente.