From 34c3061cf030d4c801b0df1f745b9743f5cc97ca Mon Sep 17 00:00:00 2001
From: Peiibol1017 <98341930+Peiibol1017@users.noreply.github.com>
Date: Tue, 15 Jul 2025 02:37:46 +0200
Subject: [PATCH] Update part5b.md

React 19 and ref as a prop instead of forwardRef.
---
 src/content/5/es/part5b.md | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/content/5/es/part5b.md b/src/content/5/es/part5b.md
index dd6f90ae57..0b12cc7b97 100644
--- a/src/content/5/es/part5b.md
+++ b/src/content/5/es/part5b.md
@@ -426,6 +426,42 @@ export default Togglable
 
 La función que crea el componente está envuelta dentro de una llamada a la función [forwardRef](https://es.react.dev/reference/react/forwardRef). De esta manera el componente puede acceder a la referencia que le fue asignada.
 
+Nota: Desde react 19 forwardRef() deja de ser necesario (pasando a estar obsoleto) ya que podemos acceder a la [referencia como una prop](https://es.react.dev/blog/2024/12/05/react-19#ref-as-a-prop) en cuyo caso el componente Togglable podría quedar de esta otra manera:
+
+```js
+import { useImperativeHandle, useState } from "react"
+const Togglable = (props) => {
+    const {ref, buttonLabel, children } = props
+    const [visible, setVisible] = useState(false)
+
+    const hideWhenVisible = {display: visible ? 'none' : ''}
+    const showWhenVisible = {display: visible ? '' : 'none'}
+    
+    const toggleVisibility = () => {
+        setVisible(!visible)
+    }
+
+    useImperativeHandle(ref, () => {
+        return {
+        toggleVisibility
+        }
+    })
+
+    return(
+        <div>
+            <div style={hideWhenVisible}>
+                <button onClick={toggleVisibility}>{buttonLabel}</button>
+            </div>
+            <div style={showWhenVisible}>
+                {children}
+                <button onClick={toggleVisibility}>cancel</button>
+            </div>
+        </div>
+    )
+}
+export default Togglable
+```
+
 El componente usa el hook [useImperativeHandle](https://es.react.dev/reference/react/useImperativeHandle) para que su función <i>toggleVisibility</i> esté disponible fuera del componente.
 
 Ahora podemos ocultar el formulario llamando a <i>noteFormRef.current.toggleVisibility()</i> después de que se haya creado una nueva nota: