upgrade to react 18 rendering api

guardian · Nov 14, 2023 · 0f4cabe · 0f4cabe
1 parent fea7ed1
commit 0f4cabe
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/client/HelpCentrePage.ts b/client/HelpCentrePage.ts
@@ -2,7 +2,7 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import * as Sentry from '@sentry/browser';
 import 'ophan-tracker-js/build/ophan.manage-my-account';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { HelpCentrePage } from './components/helpCentre/HelpCentrePage';
 
 declare let WEBPACK_BUILD: string;
@@ -15,5 +15,6 @@ if (typeof window !== 'undefined' && window.guardian && window.guardian.dsn) {
 	});
 }
 
-const element = document.getElementById('app');
-render(HelpCentrePage, element);
+const element = document.getElementById('app') as HTMLElement;
+const root = createRoot(element);
+root.render(HelpCentrePage);
diff --git a/client/MMAPage.ts b/client/MMAPage.ts
@@ -2,7 +2,7 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import * as Sentry from '@sentry/browser';
 import 'ophan-tracker-js/build/ophan.manage-my-account';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { MMAPage } from './components/mma/MMAPage';
 
 declare let WEBPACK_BUILD: string;
@@ -15,5 +15,6 @@ if (typeof window !== 'undefined' && window.guardian && window.guardian.dsn) {
 	});
 }
 
-const element = document.getElementById('app');
-render(MMAPage, element);
+const element = document.getElementById('app') as HTMLElement;
+const root = createRoot(element);
+root.render(MMAPage);