From 1a207462de8ca537f73f2a812ee7f81bfa63340d Mon Sep 17 00:00:00 2001
From: Matthew Boynes <git@mattboynes.com>
Date: Wed, 14 Feb 2024 17:19:58 -0500
Subject: [PATCH] Fix incorrect usage of ReactDOM.createRoot()

In a previous update, `ReactDOM.render()` was replaced with `ReactDOM.createRoot()`. The two functions are not interchangeable, and this was causing the user link metabox to error out on the byline profile screen.
---
 client/src/init-byline-metabox.js    |  6 ++----
 client/src/init-user-link-metabox.js | 23 ++++++++++++-----------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/client/src/init-byline-metabox.js b/client/src/init-byline-metabox.js
index 1dcf67d1..6ad14776 100644
--- a/client/src/init-byline-metabox.js
+++ b/client/src/init-byline-metabox.js
@@ -6,10 +6,8 @@ import BylineMetaBox from 'components/byline-metabox';
 const initBylineMetaBox = () => {
   const { bylineMetaBox } = bylineData;
 
-  ReactDOM.createRoot(
-    <BylineMetaBox bylineMetaBox={bylineMetaBox} />,
-    document.getElementById('byline-manager-metabox-root'),
-  );
+  ReactDOM.createRoot(document.getElementById('byline-manager-metabox-root'))
+    .render(<BylineMetaBox bylineMetaBox={bylineMetaBox} />);
 };
 
 export default initBylineMetaBox;
diff --git a/client/src/init-user-link-metabox.js b/client/src/init-user-link-metabox.js
index 50e40308..3a9dc3ab 100644
--- a/client/src/init-user-link-metabox.js
+++ b/client/src/init-user-link-metabox.js
@@ -17,17 +17,18 @@ const initUserLinkMetaBox = () => {
     usersApiUrl,
   } = bylineData;
 
-  ReactDOM.createRoot(
-    <UserLinkMetaBox
-      linkUserPlaceholder={linkUserPlaceholder}
-      linkedToLabel={linkedToLabel}
-      postId={+postId}
-      unlinkLabel={unlinkLabel}
-      user={user}
-      userAlreadyLinked={userAlreadyLinked}
-      usersApiUrl={usersApiUrl}
-    />,
-    userLinkEl,
+  ReactDOM.createRoot(userLinkEl).render(
+    (
+      <UserLinkMetaBox
+        linkUserPlaceholder={linkUserPlaceholder}
+        linkedToLabel={linkedToLabel}
+        postId={+postId}
+        unlinkLabel={unlinkLabel}
+        user={user}
+        userAlreadyLinked={userAlreadyLinked}
+        usersApiUrl={usersApiUrl}
+      />
+    ),
   );
 };