diff --git a/src/DivOverlay.js b/src/DivOverlay.js
index f869aff6..64d57e51 100644
--- a/src/DivOverlay.js
+++ b/src/DivOverlay.js
@@ -1,7 +1,6 @@
// @flow
-import React, { Fragment } from 'react'
-import { render, unmountComponentAtNode } from 'react-dom'
+import { createPortal } from 'react-dom'
import MapComponent from './MapComponent'
import updateClassName from './utils/updateClassName'
@@ -41,19 +40,19 @@ export default class DivOverlay<
this.updateLeafletElement(prevProps, this.props)
if (this.leafletElement.isOpen()) {
- this.renderContent()
+ this.leafletElement.update()
+ this.onRender()
}
}
onClose = () => {
- this.removeContent()
if (this.props.onClose) {
this.props.onClose()
}
}
onOpen = () => {
- this.renderContent()
+ this.forceUpdate() // Re-render now that leafletElement is created
if (this.props.onOpen) {
this.props.onOpen()
}
@@ -61,28 +60,10 @@ export default class DivOverlay<
onRender() {}
- renderContent = () => {
- if (this.props.children == null) {
- this.removeContent()
- } else {
- render(
- {this.props.children},
- this.leafletElement._contentNode,
- () => {
- this.leafletElement.update()
- this.onRender()
- },
- )
- }
- }
-
- removeContent = () => {
+ render() {
if (this.leafletElement._contentNode) {
- unmountComponentAtNode(this.leafletElement._contentNode)
+ return createPortal(this.props.children, this.leafletElement._contentNode)
}
- }
-
- render() {
return null
}
}
diff --git a/src/Popup.js b/src/Popup.js
index 3be6acdb..a4c5c60c 100644
--- a/src/Popup.js
+++ b/src/Popup.js
@@ -61,7 +61,6 @@ class Popup extends DivOverlay {
}
componentWillUnmount() {
- this.removeContent()
const { map } = this.props.leaflet
if (map != null) {
diff --git a/src/Tooltip.js b/src/Tooltip.js
index 6eb3ee55..0e84c9d0 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -33,8 +33,6 @@ class Tooltip extends DivOverlay {
}
componentWillUnmount() {
- this.removeContent()
-
const { popupContainer } = this.props.leaflet
if (popupContainer == null) return