From f475b69d3cf9f746ea6f6c5ef555c8be4dcaa7ff Mon Sep 17 00:00:00 2001
From: Ryan Dowd <ryandowd@Ryans-MacBook-Pro.local>
Date: Wed, 27 Sep 2023 12:07:51 +1000
Subject: [PATCH] fix: ReactDOM.render react 18 warning

---
 src/grid.tsx    | 9 +++++++--
 src/wrapper.tsx | 5 +++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/grid.tsx b/src/grid.tsx
index 4a2d465..c790656 100644
--- a/src/grid.tsx
+++ b/src/grid.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Component, createRef, RefObject } from "react";
-import { Grid as Gridjs, UserConfig } from "gridjs";
+import { Grid as Gridjs, Config } from "gridjs";
 
-class Grid extends Component<Partial<UserConfig>, any> {
+class Grid extends Component<Partial<Config>, any> {
   private wrapper: RefObject<HTMLDivElement> = createRef();
   // Grid.js instance
   private readonly instance = null;
@@ -18,6 +18,11 @@ class Grid extends Component<Partial<UserConfig>, any> {
   }
 
   componentDidMount(): void {
+    // prevent gridjs from complaining that the container is not empty
+    if (this.wrapper.current.childNodes.length > 0) {
+      this.wrapper.current.innerHTML = '';
+    }
+
     this.instance.render(this.wrapper.current);
   }
 
diff --git a/src/wrapper.tsx b/src/wrapper.tsx
index 1656e50..59e39cc 100644
--- a/src/wrapper.tsx
+++ b/src/wrapper.tsx
@@ -1,5 +1,5 @@
 import { h, createRef as gCreateRef, Component as gComponent } from "gridjs";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 
 export class ReactWrapper extends gComponent<{
@@ -13,7 +13,8 @@ export class ReactWrapper extends gComponent<{
   ref = gCreateRef();
 
   componentDidMount(): void {
-    ReactDOM.render(this.props.element, this.ref.current);
+    const root = createRoot(this.ref.current);
+    root.render(this.props.element);
   }
 
   render() {