From 09ca6f45a7d957d29c4b49f087b7c385c2be3f59 Mon Sep 17 00:00:00 2001
From: Peter Bomber <peter.bomber@microsoft.com>
Date: Fri, 13 Oct 2023 16:26:34 +1300
Subject: [PATCH] update deprecated React render function call

---
 webview-ui/src/main.tsx            | 8 ++++----
 webview-ui/src/manualTest/main.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/webview-ui/src/main.tsx b/webview-ui/src/main.tsx
index a57341193..c333b5319 100644
--- a/webview-ui/src/main.tsx
+++ b/webview-ui/src/main.tsx
@@ -1,5 +1,5 @@
 import { StrictMode } from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import './main.css';
 import { decodeState } from "../../src/webview-contract/initialState";
 import { CreateCluster } from "./CreateCluster/CreateCluster";
@@ -23,6 +23,7 @@ import { AzureServiceOperator } from "./AzureServiceOperator/AzureServiceOperato
 //   and will respond using `Webview.postMessage`.
 
 const rootElem = document.getElementById("root");
+const root = createRoot(rootElem!);
 
 function getVsCodeContent(): JSX.Element {
     if (!rootElem) {
@@ -47,9 +48,8 @@ function getVsCodeContent(): JSX.Element {
     return rendererLookup[vscodeContentId]();
 }
 
-ReactDOM.render(
+root.render(
     <StrictMode>
         {getVsCodeContent()}
-    </StrictMode>,
-    rootElem
+    </StrictMode>
 );
diff --git a/webview-ui/src/manualTest/main.tsx b/webview-ui/src/manualTest/main.tsx
index 280944082..c53a8dc64 100644
--- a/webview-ui/src/manualTest/main.tsx
+++ b/webview-ui/src/manualTest/main.tsx
@@ -1,5 +1,5 @@
 import { StrictMode } from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import './vars.css';
 import '../main.css';
 import { TestScenarioSelector } from "./TestScenarioSelector/TestScenarioSelector";
@@ -24,6 +24,7 @@ import { getASOScenarios } from "./asoTests";
 //   dispatching `message` events to the `window` object so that application components can listen to them in the same way.
 
 const rootElem = document.getElementById("root");
+const root = createRoot(rootElem!);
 
 const contentTestScenarios: Record<ContentId, Scenario[]> = {
     style: getTestStyleViewerScenarios(),
@@ -39,11 +40,10 @@ const testScenarios = Object.values(contentTestScenarios).flatMap(s => s);
 
 const testScenarioNames = testScenarios.map(f => f.name);
 
-ReactDOM.render(
+root.render(
     <StrictMode>
         <TestScenarioSelector testScenarioNames={testScenarioNames} onTestScenarioChange={handleTestScenarioChange} />
-    </StrictMode>,
-    rootElem
+    </StrictMode>
 );
 
 function handleTestScenarioChange(name: string): JSX.Element {