a criação de modais e dicas de ferramentas no React costumava ser complexa e difícil de estilizar e levava a muitos erros de estilo.
A API createPortal simplifica esse processo, permitindo renderizar componentes fora do DOM principal, o que resulta em facilidade de estilo e manutenção. Neste post aprenderemos como usar esta ferramenta para criar modais e dicas de ferramentas da maneira certa no React.

Compreendendo a API createPortal

createPortal é uma função integrada do React que permite renderizar componentes em diferentes partes do DOM. E é particularmente útil para construir: modais e sobreposições, componentes de terceiros e elementos de UI personalizados.

Como funciona

Um portal é usado dentro da instrução return do componente e apenas altera o posicionamento físico do nó DOM. é como teletransportar um nó DOM para fora da árvore DOM principal. A API createPortal acessa dois parâmetros e um terceiro opcional:

• Children: qualquer coisa que possa ser renderizada com React, uma div, componente ou fragmento React.
• domNode: que é a localização dos filhos a serem colocados.
• key (opcional): um número ou string exclusivo para ser usado como chave do portal.

Se assumirmos que criamos um portal no componente A e o renderizamos no componente B, os filhos do portal acessarão todo o estado e variável do componente A e funcionarão como estão no componente A enquanto for renderizado no componente B.

Criando e usando o portal

No exemplo abaixo o portal é usado para teletransportar o componente Child que aceita um estado e mover esse componente para o corpo.

import { createPortal } from 'react-dom'

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

  return(
    

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

export default App

Agora o componente filho será renderizado em tags corporais em HTML.

Conclusão

createPortal é uma ferramenta valiosa no React para criar modais, dicas de ferramentas e outros componentes que precisam ser renderizados fora da árvore DOM principal. ao usar esta ferramenta você pode obter uma abordagem mais limpa, flexível e eficiente desses elementos.