From 1cea47dce9e7f8c0e496fc4431d0aa7420a9b624 Mon Sep 17 00:00:00 2001
From: andrewHEguardian <114918544+andrewHEguardian@users.noreply.github.com>
Date: Fri, 10 Nov 2023 15:46:29 +0000
Subject: [PATCH] upgrade to react 18 rendering api

---
 client/HelpCentrePage.ts | 7 ++++---
 client/MMAPage.ts        | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/client/HelpCentrePage.ts b/client/HelpCentrePage.ts
index 241ec6c433..bbd464946f 100644
--- 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
index e9f66e91c8..a48da80893 100644
--- 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);