From 2a8e0a7ab57ce0d7858c509d755c6a8c5369e01b Mon Sep 17 00:00:00 2001
From: Muhammad Yasir <shahzadyasir77@gmail.com>
Date: Wed, 27 Apr 2022 06:17:23 +0500
Subject: [PATCH] Replaced old ReactDOM API with new React v18 API (#4598)

* Replaced old ReactDOM API with new React v18 API

Replaced old ReactDOM API with new React v18 API

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

The above implementation has been replaced by the following implementation according to React v18.

ReactDOM
  .createRoot(document.getElementById('root'))
  .render(<LoginControl />);

* Changed ReactDOM.createRoot syntax into two lines

```
ReactDOM
  .createRoot(document.getElementById('root'))
  .render(<LoginControl />);
```
has been changed to

```
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<LoginControl />);
```

* Added a comment on <Greeting/> comp.
---
 content/docs/conditional-rendering.md | 27 ++++++++++-----------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index 8a6763d7..d8c01b1e 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -35,11 +35,9 @@ function Greeting(props) {
   return <GuestGreeting />;
 }
 
-ReactDOM.render(
-  // Try changing to isLoggedIn={true}:
-  <Greeting isLoggedIn={false} />,
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root')); 
+// Try changing to isLoggedIn={true}:
+root.render(<Greeting isLoggedIn={false} />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
@@ -110,10 +108,8 @@ class LoginControl extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <LoginControl />,
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root')); 
+root.render(<LoginControl />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
@@ -140,10 +136,9 @@ function Mailbox(props) {
 }
 
 const messages = ['React', 'Re: React', 'Re:Re: React'];
-ReactDOM.render(
-  <Mailbox unreadMessages={messages} />,
-  document.getElementById('root')
-);
+
+const root = ReactDOM.createRoot(document.getElementById('root')); 
+root.render(<Mailbox unreadMessages={messages} />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
@@ -244,10 +239,8 @@ class Page extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <Page />,
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root')); 
+root.render(<Page />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)