From 7a26c690e1ee3f9a0f30810196b8f732534d1c60 Mon Sep 17 00:00:00 2001
From: Elisha Nuchi <31550519+enuchi@users.noreply.github.com>
Date: Sun, 12 Mar 2023 01:04:49 -0500
Subject: [PATCH] Update ReactDOM render to use createRoot (#148)

react 18 new API
---
 dev/index.js                              | 6 ++++--
 src/client/dialog-demo-bootstrap/index.js | 6 ++++--
 src/client/dialog-demo/index.js           | 6 ++++--
 src/client/sidebar-about-page/index.js    | 6 ++++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/dev/index.js b/dev/index.js
index 94ff54a..fda81d0 100644
--- a/dev/index.js
+++ b/dev/index.js
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { serverFunctions } from '../src/client/utils/serverFunctions.ts';
 
 const { FILENAME, PORT } = process.env;
@@ -58,4 +58,6 @@ const DevServer = () => {
   );
 };
 
-ReactDOM.render(<DevServer />, document.getElementById('index'));
+const container = document.getElementById('index');
+const root = createRoot(container);
+root.render(<DevServer />);
diff --git a/src/client/dialog-demo-bootstrap/index.js b/src/client/dialog-demo-bootstrap/index.js
index 846e94a..107375c 100644
--- a/src/client/dialog-demo-bootstrap/index.js
+++ b/src/client/dialog-demo-bootstrap/index.js
@@ -1,7 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import SheetEditor from './components/SheetEditor';
 
 import './styles.css';
 
-ReactDOM.render(<SheetEditor />, document.getElementById('index'));
+const container = document.getElementById('index');
+const root = createRoot(container);
+root.render(<SheetEditor />);
diff --git a/src/client/dialog-demo/index.js b/src/client/dialog-demo/index.js
index 846e94a..107375c 100644
--- a/src/client/dialog-demo/index.js
+++ b/src/client/dialog-demo/index.js
@@ -1,7 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import SheetEditor from './components/SheetEditor';
 
 import './styles.css';
 
-ReactDOM.render(<SheetEditor />, document.getElementById('index'));
+const container = document.getElementById('index');
+const root = createRoot(container);
+root.render(<SheetEditor />);
diff --git a/src/client/sidebar-about-page/index.js b/src/client/sidebar-about-page/index.js
index db5a895..800211a 100644
--- a/src/client/sidebar-about-page/index.js
+++ b/src/client/sidebar-about-page/index.js
@@ -1,5 +1,7 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import About from './components/About';
 
-ReactDOM.render(<About />, document.getElementById('index'));
+const container = document.getElementById('index');
+const root = createRoot(container);
+root.render(<About />);