la creación de modales e información sobre herramientas en React a menudo era compleja y difícil de diseñar y genera muchos errores de estilo.
La API createPortal simplifica este proceso permitiendo renderizar componentes fuera del DOM principal, lo que resulta en facilidad de estilo y mantenimiento. En esta publicación aprenderemos cómo usar esta herramienta para crear modales e información sobre herramientas de la manera correcta en React.

Entendiendo la API de CreatePortal

createPortal es una función incorporada de React que le permite renderizar componentes en diferentes partes del DOM. Y es particularmente útil para crear: modales y superposiciones, componentes de terceros y elementos de interfaz de usuario personalizados.

como funciona

Se utiliza un portal dentro de la declaración de devolución del componente y solo cambia la ubicación física del nodo DOM. es como teletransportar un nodo DOM fuera del árbol DOM principal. La API createPortal accede a dos parámetros y un tercero opcional:

• Niños: cualquier cosa que se pueda renderizar con React, un div, componente o fragmento de React.
• domNode: que es la ubicación de los hijos a colocar.
• clave (opcional): un número o cadena única que se utilizará como clave del portal.

Si asumimos que creamos un portal en el componente A y lo representamos en el componente B, los elementos secundarios del portal accederán a todo el estado y las variables del componente A y funcionarán como están en el componente A mientras se representa en el componente. B.

Creación y uso del portal

En el siguiente ejemplo, el portal se utiliza para teletransportar el componente Niño que acepta un estado y mueve este componente al cuerpo.

import { createPortal } from 'react-dom'

const App = () => {
  const [state, setState] = useState()

  return(
    

      
 ... 
      createPoratl(
        ,
        document.body
      )
    
  )
}

export default App

Ahora el componente secundario se representará en etiquetas de cuerpo en HTML.

Conclusión

createPortal es una herramienta valiosa en React para crear modales, información sobre herramientas y otros componentes que deben representarse fuera del árbol DOM principal. Al utilizar esta herramienta podrás lograr un enfoque más limpio, flexible y eficiente de estos elementos.