react 18 (createRoot, unmount)

Author: DenverCoder544

bundles/paikkatietoikkuna/coordinatetransformation/Flyout.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { FlyoutContent } from './view/FlyoutContent';
 import { LocaleProvider, ThemeProvider } from 'oskari-ui/util';
 import { Spin } from 'oskari-ui';
@@ -13,6 +13,7 @@ Oskari.clazz.define('Oskari.coordinatetransformation.Flyout',
         this.loc = Oskari.getMsg.bind(null, BUNDLE);
         this.container = null;
         this.handler = null;
+        this._reactRoot = null;
     }, {
         getName: function () {
             return 'Oskari.coordinatetransformation.Flyout';
@@ -24,6 +25,7 @@ Oskari.clazz.define('Oskari.coordinatetransformation.Flyout',
             flyout.addClass(BUNDLE);
             this.flyout = flyout;
             this.container = el[0];
+            this._reactRoot = createRoot(this.container);
             this.container.classList.add(BUNDLE);
         },
         getHandler: function () {
@@ -35,6 +37,9 @@ Oskari.clazz.define('Oskari.coordinatetransformation.Flyout',
         },
         teardown: function () {
             this.handler?.onFlyoutClose();
+            if (this._reactRoot) {
+                this._reactRoot.unmount();
+            }
         },
         // For some screen sizes css + media doesn't give enough space for content
         setContainerMaxHeight: function (mapHeight) {
@@ -64,7 +69,7 @@ Oskari.clazz.define('Oskari.coordinatetransformation.Flyout',
                     </ThemeProvider>
                 </LocaleProvider>
             );
-            ReactDOM.render(content, this.container);
+            this._reactRoot.render(content);
         }
     }, {
         extend: ['Oskari.userinterface.extension.DefaultFlyout']

bundles/paikkatietoikkuna/inspire/Flyout.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Message } from 'oskari-ui';
 
 Oskari.clazz.define('Oskari.inspire.Flyout',
@@ -18,6 +18,7 @@ Oskari.clazz.define('Oskari.inspire.Flyout',
         },
         setEl: function (el, flyout, width, height) {
             this.container = el[0];
+            this._reactRoot = createRoot(this.container);
             this.flyout = flyout;
             this.container.classList.add('inspire');
             this.flyout.addClass('inspire');
@@ -28,11 +29,10 @@ Oskari.clazz.define('Oskari.inspire.Flyout',
          * @method createContent
          */
         createContent: function () {
-            const root = this.container;
-            if (!root) {
+            if (!this._reactRoot) {
                 return;
             }
-            ReactDOM.render(<Message bundleKey={ this.instance.getName() } messageKey="flyoutContent.content" allowHTML={true} />, root);
+            this._reactRoot.render(<Message bundleKey={ this.instance.getName() } messageKey="flyoutContent.content" allowHTML={true} />);
         },
         startPlugin: function () {}
     });

bundles/paikkatietoikkuna/mobileuserguide/instance.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Message } from 'oskari-ui';
 import { Link } from './Link';
 import styled from 'styled-components';
@@ -55,7 +55,8 @@ Oskari.clazz.define('Oskari.pti.mobileuserguide.UserGuideBundleInstance',
             if (linksContainer) {
                 const container = document.createElement('div');
                 linksContainer.append(container);
-                this.addLink(container);
+                const reactRoot = createRoot(container);
+                this.addLink(reactRoot);
             }
             this.addDesktopRequestLink();
         },
@@ -64,22 +65,22 @@ Oskari.clazz.define('Oskari.pti.mobileuserguide.UserGuideBundleInstance',
             return LINKS[Oskari.getLang()] || LINKS.fi;
         },
 
-        addLink: function (root) {
-            ReactDOM.render(<div>
+        addLink: function (reactRoot) {
+            reactRoot.render(<div>
                 <Link href={ this.getHref() }><Message bundleKey={ this.getName() } messageKey='title' /></Link>
-            </div>, root);
+            </div>);
         },
 
         addDesktopRequestLink: function () {
             // generate root for React
-            const linkContainer = document.createElement('div');
+            const linkContainer = createRoot(document.createElement('div'));
             // attach under the disclaimer
             const disclaimerEl = document.getElementById('pti_disclaimer');
             disclaimerEl.after(linkContainer);
             // render the link
-            ReactDOM.render(<DesktopLink href={ this.createLinkHref() }>
+            linkContainer.render(<DesktopLink href={ this.createLinkHref() }>
                 <Message bundleKey={ this.getName() } messageKey='requestDesktop' />
-            </DesktopLink>, linkContainer);
+            </DesktopLink>);
         },
         createLinkHref: function () {
             const url = new URL(window.location.href);