From 6a2bd3e4af39957cd0626cae390aa0b0524d3bf0 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Fri, 14 Apr 2023 20:32:42 +0300
Subject: [PATCH] Update to React 18

---
 blog_posts/breaking-react.md              | 4 +++-
 blog_posts/react-conditional-classname.md | 5 ++---
 blog_posts/react-use-state-with-label.md  | 4 +++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/blog_posts/breaking-react.md b/blog_posts/breaking-react.md
index 867797162..a491e6c80 100644
--- a/blog_posts/breaking-react.md
+++ b/blog_posts/breaking-react.md
@@ -33,7 +33,9 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```
 
 This is a pretty simple React application, with a container, two buttons and a state variable. The problem is it will crash if you click the button that calls `destroyElement()` and then click the other one. _Why?_ you might ask. The issue here might not be immediately obvious, but if you look at your browser console you will notice the following exception:
diff --git a/blog_posts/react-conditional-classname.md b/blog_posts/react-conditional-classname.md
index e141d1b24..5d6bd7f97 100644
--- a/blog_posts/react-conditional-classname.md
+++ b/blog_posts/react-conditional-classname.md
@@ -22,12 +22,11 @@ const OtherComponent = ({ enabled }) => {
   return ( <div className={enabled ? 'enabled' : null}> Hi </div> );
 };
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <>
     <MyComponent enabled={false} />
     <OtherComponent enabled={false} />
-  </>,
-  document.getElementById('root')
+  </>
 );
 ```
 
diff --git a/blog_posts/react-use-state-with-label.md b/blog_posts/react-use-state-with-label.md
index a5cf33d4e..5938fcc07 100644
--- a/blog_posts/react-use-state-with-label.md
+++ b/blog_posts/react-use-state-with-label.md
@@ -26,7 +26,9 @@ const Counter = () => {
   );
 };
 
-ReactDOM.render(<Counter />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Counter />
+);
 // Inspecting `Counter` in React developer tools will display:
 //  StateWithLabel: "counter: 0"
 ```