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( +