update deprecated React render function call

Azure · Oct 13, 2023 · 09ca6f4 · 09ca6f4
1 parent d4fc0ae
commit 09ca6f4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git 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
@@ -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 {