From dfd64aea9c6d4b88ea458fa18d07ef8db592cd51 Mon Sep 17 00:00:00 2001
From: Karl Horky <karl.horky@gmail.com>
Date: Wed, 19 Oct 2022 10:22:58 +0200
Subject: [PATCH] [Docs] `jsx-no-leaked-render`: Remove mentions of empty
 strings for React 18

Ref: https://github.com/jsx-eslint/eslint-plugin-react/pull/3203#issuecomment-1282517969
---
 CHANGELOG.md                       |  4 ++++
 docs/rules/jsx-no-leaked-render.md | 32 +++++++++++++++---------------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6c27654dbf..3a8f732dc3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,9 +18,13 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`jsx-newline`]: No newline between comments and jsx elements ([#3493][] @justmejulian)
 * [`jsx-no-leaked-render`]: Don't report errors on empty strings if React >= v18 ([#3488][] @himanshu007-creator)
 
+### Changed
+* [Docs] [`jsx-no-leaked-render`]: Remove mentions of empty strings for React 18 ([#3468][] @karlhorky)
+
 [#3494]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3494
 [#3493]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3493
 [#3488]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3488
+[#3468]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3468
 [#3461]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3461
 [#3452]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3452
 [#3449]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3449
diff --git a/docs/rules/jsx-no-leaked-render.md b/docs/rules/jsx-no-leaked-render.md
index 258ea1f2c0..88b74838ab 100644
--- a/docs/rules/jsx-no-leaked-render.md
+++ b/docs/rules/jsx-no-leaked-render.md
@@ -10,23 +10,23 @@ Using the `&&` operator to render some element conditionally in JSX can cause un
 
 This rule aims to prevent dangerous leaked values from being rendered since they can cause unexpected values reaching the final DOM or even crashing your render method.
 
-In React, you might end up rendering unexpected values like `0` or `NaN`. In React Native, your render method will crash if you render `0`, `''`, or `NaN`:
+In React, you might end up rendering unexpected values like `0` or `NaN`. In React Native, your render method will even crash if you render these values:
 
 ```jsx
 const Example = () => {
   return (
     <>
-      {0 && <Something/>}
+      {0 && <Something />}
       {/* React: renders undesired 0 */}
       {/* React Native: crashes 💥 */}
 
-      {'' && <Something/>}
-      {/* React: renders nothing */}
-      {/* React Native: crashes 💥 */}
-
-      {NaN && <Something/>}
+      {NaN && <Something />}
       {/* React: renders undesired NaN */}
       {/* React Native: crashes 💥 */}
+
+      {'' && <Something />}
+      {/* React: renders nothing */}
+      {/* React Native, with React < 18: crashes 💥 */}
     </>
   )
 }
@@ -55,7 +55,7 @@ const Component = ({ count }) => {
 
 ```jsx
 const Component = ({ elements }) => {
-  return <div>{elements.length && <List elements={elements}/>}</div>
+  return <div>{elements.length && <List elements={elements} />}</div>
 }
 ```
 
@@ -71,13 +71,13 @@ const Component = ({ nestedCollection }) => {
 
 ```jsx
 const Component = ({ elements }) => {
-  return <div>{elements[0] && <List elements={elements}/>}</div>
+  return <div>{elements[0] && <List elements={elements} />}</div>
 }
 ```
 
 ```jsx
 const Component = ({ numberA, numberB }) => {
-  return <div>{(numberA || numberB) && <Results>{numberA+numberB}</Results>}</div>
+  return <div>{(numberA || numberB) && <Results>{numberA + numberB}</Results>}</div>
 }
 ```
 
@@ -85,7 +85,7 @@ const Component = ({ numberA, numberB }) => {
 // If the condition is a boolean value, this rule will report the logical expression
 // since it can't infer the type of the condition.
 const Component = ({ someBool }) => {
-  return <div>{someBool && <Results>{numberA+numberB}</Results>}</div>
+  return <div>{someBool && <Results>{numberA + numberB}</Results>}</div>
 }
 ```
 
@@ -119,31 +119,31 @@ const Component = ({ elements, count }) => {
 
 ```jsx
 const Component = ({ elements }) => {
-  return <div>{!!elements.length && <List elements={elements}/>}</div>
+  return <div>{!!elements.length && <List elements={elements} />}</div>
 }
 ```
 
 ```jsx
 const Component = ({ elements }) => {
-  return <div>{Boolean(elements.length) && <List elements={elements}/>}</div>
+  return <div>{Boolean(elements.length) && <List elements={elements} />}</div>
 }
 ```
 
 ```jsx
 const Component = ({ elements }) => {
-  return <div>{elements.length > 0 && <List elements={elements}/>}</div>
+  return <div>{elements.length > 0 && <List elements={elements} />}</div>
 }
 ```
 
 ```jsx
 const Component = ({ elements }) => {
-  return <div>{elements.length ? <List elements={elements}/> : null}</div>
+  return <div>{elements.length ? <List elements={elements} /> : null}</div>
 }
 ```
 
 ```jsx
 const Component = ({ elements }) => {
-  return <div>{elements.length ? <List elements={elements}/> : <EmptyList />}</div>
+  return <div>{elements.length ? <List elements={elements} /> : <EmptyList />}</div>
 }
 ```