React.js Portals and its usage

Portals help developers to render children into DOM nodes that exist outside the DOM hierarchy of the parent component. 

ReactDOM.createPortal(child, container)

In this line of code the first argument, child is any renderable React child. It could be an element like a string, fragment. Second argument i.e the container is a DOM element. Normally when returning an element from the components method the element is mounted into the DOM as a child of the closest parent node. This is useful sometimes to insert a child into different locations in the DOM. 

Here are some examples of the usage of portals. First one is HTML.

<!--Div for showing main component -->
<div id="example"></div>
<!--Div for popup showing -->
<div id="popup"></div>

In this HTML example we have two div tags. One is the main component and the other is for displaying popup messages.

In our next Javascript example two components are used. One component displays the main component and the other is used for displaying popups. In the main component there is a button,When we click on it the status will change from false to true and a popup will display. When the close button on the popup is clicked the status will change back to false.

//Here we are creating a component which will display in the form of the popups and we can also include some text messages on this model
class Pop extends React.Component {
constructor(props) {
super(props)
//Creating or capturing details of the div element
this.element = document.createElement('div')
}
//This function called automatically after rendering of the components
componentDidMount() {
//Appending of the element to the popup model
document.getElementById('popup').appendChild(this.element)
}
//This function unmount the displayed popups and this also et automatically called
componentWillUnmount() {
//removing the element popups from the appended previously
document.getElementById('popup').removeChild(this.element)
}
render() {
//Creating a portal for handling our cases
return ReactDOM.createPortal(
//Taking child and element
this.props.children,
this.element
)
}
}

The main components and second components contain child components of the pop-ups.

class Portalexample extends React.Component {
constructor(props) {
super(props)
//Initializing the model as the false which means the popups will be closed at the starting time and later according to the operations the value will be either true or false.
this.state = {showhideModel: false}
this.manageShowHide = this.manageShowHide.bind(this)
this.manageHide = this.manageHide.bind(this)
}
//Changing of the true and false of the show hide will be managed in this function and it will be called when clicked the button .
manageShowHide() {
this.setState({showhideModel: true})
}
manageHide() {
this.setState({showhideModel: false})
}
render() {
//Show and hide will be handles here on clicking the button
constshowpopups = this.state.showhideModel ? (
<Pop>
<div>
Hello friends <button onClick={this.manageHide}>Close</button>
</div>
</Pop>
) : ''
return (
<div>
The portal example <button onClick={this.manageShowHide}>Display Model</button>
{showpopups}
</div>
)
}
}
//Attaching the component with the div of html which we have created
ReactDOM.render(<Portalexample />, document.getElementById('example'))