From 8b5fb8c1f0ebd3d3e03951bc39a5d28d16d23dcb Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@gmail.com>
Date: Thu, 17 Mar 2022 17:14:44 -0400
Subject: [PATCH] [18] Upgrade homepage examples

---
 .../examples/a-component-using-external-plugins.js    |  5 +----
 content/home/examples/a-simple-component.js           | 11 ++---------
 content/home/examples/a-stateful-component.js         |  5 +----
 content/home/examples/an-application.js               |  5 +----
 src/components/CodeEditor/CodeEditor.js               | 11 ++++++++++-
 5 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/content/home/examples/a-component-using-external-plugins.js b/content/home/examples/a-component-using-external-plugins.js
index 305efe61cfd..d968bb7a585 100644
--- a/content/home/examples/a-component-using-external-plugins.js
+++ b/content/home/examples/a-component-using-external-plugins.js
@@ -36,7 +36,4 @@ class MarkdownEditor extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <MarkdownEditor />,
-  document.getElementById('markdown-example')
-);
+root.render(<MarkdownEditor />);
diff --git a/content/home/examples/a-simple-component.js b/content/home/examples/a-simple-component.js
index 90c31b960f7..6e9c5ae563c 100644
--- a/content/home/examples/a-simple-component.js
+++ b/content/home/examples/a-simple-component.js
@@ -1,14 +1,7 @@
 class HelloMessage extends React.Component {
   render() {
-    return (
-      <div>
-        Hello {this.props.name}
-      </div>
-    );
+    return <div>Hello {this.props.name}</div>;
   }
 }
 
-ReactDOM.render(
-  <HelloMessage name="Taylor" />,
-  document.getElementById('hello-example')
-);
\ No newline at end of file
+root.render(<HelloMessage name="Taylor" />);
diff --git a/content/home/examples/a-stateful-component.js b/content/home/examples/a-stateful-component.js
index 25d5a914594..bc329253bb0 100644
--- a/content/home/examples/a-stateful-component.js
+++ b/content/home/examples/a-stateful-component.js
@@ -27,7 +27,4 @@ class Timer extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <Timer />,
-  document.getElementById('timer-example')
-);
\ No newline at end of file
+root.render(<Timer />);
diff --git a/content/home/examples/an-application.js b/content/home/examples/an-application.js
index 08dbc2bf821..c4313e85243 100644
--- a/content/home/examples/an-application.js
+++ b/content/home/examples/an-application.js
@@ -60,7 +60,4 @@ class TodoList extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <TodoApp />,
-  document.getElementById('todos-example')
-);
+root.render(<TodoApp />);
diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 881865bca7e..dbf21abdec6 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -248,14 +248,23 @@ class CodeEditor extends Component {
 
   _render() {
     const {compiled} = this.state;
+    const {containerNodeID} = this.props;
+
+    // Until we upgrade Gatsby to React 18, fake the new root API.
+    const root = {
+      render: element => {
+        ReactDOM.render(element, document.getElementById(containerNodeID));
+      },
+    };
 
     try {
       // Example code requires React, ReactDOM, and Remarkable to be within scope.
       // It also requires a "mountNode" variable for ReactDOM.render()
       // eslint-disable-next-line no-new-func
-      new Function('React', 'ReactDOM', 'Remarkable', compiled)(
+      new Function('React', 'ReactDOM', 'root', 'Remarkable', compiled)(
         React,
         ReactDOM,
+        root,
         Remarkable,
       );
     } catch (error) {