![\"hire-react-native-developers\"](\"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/04\/hire-react-native-developers.png\")
<\/a><\/figure>\n\n\n\nHowever, this does not mean that the component is detached from the React hierarchy. The component still behaves like a normal React child in every other way, such as receiving props, context, and lifecycle methods from its parent component. It also still participates in the event bubbling mechanism, meaning that any event fired from inside the portal will propagate to its ancestors in the React tree, even if they are not ancestors in the DOM tree.<\/p>\n\n\n\n
How do React Portals work?<\/h2>\n\n\n\n
To create a portal, you use the ReactDOM.createPortal function. It requires two things: a child component and a container element. The child component is any renderable React element, such as an element, string, fragment, or another component. The container element is a DOM node where you want to render the child component.<\/p>\n\n\n\n
For example, let’s say you have the following HTML structure:<\/p>\n\n\n\n
<html>\n<body>\n <div id=\"app-root\"><\/div>\n <div id=\"modal-root\"><\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nAnd you have a Modal component that you want to render into the modal-root element, instead of the app-root element where your React app is mounted. You can use ReactDOM.createPortal like this:<\/p>\n\n\n\n
import ReactDOM from \"react-dom\";\nfunction Modal(props) {\n\/\/ Create a new div element\nconst el = document.createElement(\"div\");\n\/\/ Append it to the modal-root element\nconst modalRoot = document.getElementById(\"modal-root\");\nmodalRoot.appendChild(el);\n\/\/ Use ReactDOM.createPortal to render the props.children into the new div element\nreturn ReactDOM.createPortal(props.children, el);\n}\nexport default Modal;<\/code><\/pre>\n\n\n\nNow you can use the Modal component anywhere in your React app, and it will be rendered into the modal-root element instead of its parent node.<\/p>\n\n\n\n
How to use React Portals in an Example?<\/h2>\n\n\n\n
To demonstrate how to use React Portals in a real-world scenario, let’s build a simple app that shows a list of products and allows the user to click on each product to see more details in a modal window.<\/p>\n\n\n\n
First, let’s create a Product component that renders a product name and an image:<\/p>\n\n\n\n
import React from \"react\";\nfunction Product(props) {\n const { name, image } = props;\n return (\n <div className=\"product\">\n <h3>{name}<\/h3>\n <img src={image} alt={name} \/>\n <\/div>\n );\n}\nexport default Product;<\/code><\/pre>\n\n\n\nNext, let’s create a ProductList component that renders an array of products using the Product component:<\/p>\n\n\n\n
import Product from \".\/Product\";\n\nfunction ProductList(props) {\n const { products } = props;\nreturn (\n <div className=\"product-list\">\n {products.map((product) => (\n <Product key={product.id} {...product} \/>\n ))}\n <\/div>\n );\n}\nexport default ProductList;<\/code><\/pre>\n\n\n\nThen, let’s create a ProductDetails component that renders more information about a product, such as its description and price:<\/p>\n\n\n\n![\"react](\"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/01\/react-native-app-development-mistakes-cta.png\")
<\/a><\/figure>\n\n\n\nimport React from \"react\";\n\nfunction ProductDetails(props) {\n const { name, image, description, price } = props;\nreturn (\n <div className=\"product-details\">\n <h3>{name}<\/h3>\n <img src={image} alt={name} \/>\n <p>{description}<\/p>\n <p>${price}<\/p>\n <\/div>\n );\n}\nexport default ProductDetails;<\/code><\/pre>\n\n\n\nFinally, let’s create an App<\/code><\/a><\/strong> component that renders the ProductList<\/code> component and uses the Modal<\/code> component to show the ProductDetails<\/code> component when a product is clicked. We also need to keep track of the selected product and the modal visibility in the state:<\/p>\n\n\n\nimport React, { useState } from \"react\";\nimport ProductList from \".\/ProductList\";\nimport Modal from \".\/Modal\";\nimport ProductDetails from \".\/ProductDetails\";\n\/\/ Some mock data for products\nconst products = [\n {\n id: 1,\n name: \"iPhone 14\",\n image: \"https:\/\/example.com\/iphone14.jpg\",\n description: \"The latest and greatest smartphone from Apple.\",\n price: 999,\n },\n {\n id: 2,\n name: \"MacBook Pro\",\n image: \"https:\/\/example.com\/macbookpro.jpg\",\n description: \"The most powerful laptop for professionals.\",\n price: 1999,\n },\n {\n id: 3,\n name: \"AirPods Pro\",\n image: \"https:\/\/example.com\/airpodspro.jpg\",\n description: \"The best wireless earbuds with noise cancellation.\",\n price: 249,\n },\n];\nfunction App() {\n \/\/ The state for the selected product\n const [selectedProduct, setSelectedProduct] = useState(null);\n \/\/ The state for the modal visibility\n const [isModalOpen, setIsModalOpen] = useState(false);\n \/\/ The handler for clicking on a product\n const handleProductClick = (product) => {\n \/\/ Set the selected product to the clicked product\n setSelectedProduct(product);\n \/\/ Open the modal\n setIsModalOpen(true);\n };\n \/\/ The handler for closing the modal\n const handleModalClose = () => {\n \/\/ Set the selected product to null\n setSelectedProduct(null);\n \/\/ Close the modal\n setIsModalOpen(false);\n };\n return (\n <div className=\"app\">\n <h1>React Portals Example<\/h1>\n {\/* Render the product list and pass the click handler as a prop *\/}\n <ProductList products={products} onProductClick={handleProductClick} \/>\n {\/* Render the modal if it is open and pass the close handler as a prop *\/}\n {isModalOpen && (\n <Modal onClose={handleModalClose}>\n {\/* Render the product details inside the modal using the selected product *\/}\n <ProductDetails {...selectedProduct} \/>\n <\/Modal>\n )}\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\n\n\n\nAnd that’s it! We have successfully used React Portals to render a modal window outside of the normal React hierarchy, while still maintaining the parent-child relationship and the event bubbling mechanism.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
In this blog, we covered the basics of React Portals – what they are, how they function, and provided a straightforward example to help you understand their practical usage. We saw how React Portals can help us render components outside of their parent container’s overflow or z-index constraints, such as modals, tooltips, dropdowns, or other UI elements<\/strong><\/a> that need to break out of their normal position.<\/p>\n\n\n\n