From 1e7eed609a5f1b38c30193044c5b73d414070713 Mon Sep 17 00:00:00 2001
From: carl-printreleaf <cdileo@printreleaf.com>
Date: Wed, 1 Feb 2023 11:50:24 -0700
Subject: [PATCH 1/2] Update react syntax to v18

---
 javascript/webpacker_react-npm-module/src/index.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/javascript/webpacker_react-npm-module/src/index.js b/javascript/webpacker_react-npm-module/src/index.js
index e02b81c..873b1df 100644
--- a/javascript/webpacker_react-npm-module/src/index.js
+++ b/javascript/webpacker_react-npm-module/src/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import intersection from 'lodash/intersection'
 import keys from 'lodash/keys'
 import assign from 'lodash/assign'
@@ -17,8 +17,9 @@ const WebpackerReact = {
     const props = propsJson && JSON.parse(propsJson)
 
     const reactElement = React.createElement(component, props)
+    const root = createRoot(node)
 
-    ReactDOM.render(reactElement, node)
+    root.render(reactElement)
   },
 
   registerComponents(components) {
@@ -34,7 +35,7 @@ const WebpackerReact = {
   unmountComponents() {
     const mounted = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}]`)
     for (let i = 0; i < mounted.length; i += 1) {
-      ReactDOM.unmountComponentAtNode(mounted[i])
+      mounted[i].unmount()
     }
   },
 

From b81f8fee5cdb722473c9a748f60f6a6a0c505602 Mon Sep 17 00:00:00 2001
From: carl-printreleaf <cdileo@printreleaf.com>
Date: Wed, 1 Feb 2023 11:53:00 -0700
Subject: [PATCH 2/2] Update changlog to reflect React syntax changes

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 32d0e90..a107f00 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Changed
 - Tests now uses headless chrome instead of Poltergeist
 - Babel is configured with `babel-preset-env`
+- Updated React syntax to v18
 
 ### Removed
 - Support for `react-hot-loader`. Please look at the README for instructions on how to use `react-hot-loader` 4 with your app, it is much simpler and better!