From 0e9a193435454cd4891760d2bc5efdb2d2bc6294 Mon Sep 17 00:00:00 2001
From: Chiawen Chen <golopot@gmail.com>
Date: Wed, 13 Jan 2021 18:05:12 +0800
Subject: [PATCH] [Fix] `jsx-curly-brace-presence`: ignore containers with
 comments

Fixes #2885
---
 CHANGELOG.md                                |  2 ++
 docs/rules/jsx-curly-brace-presence.md      |  1 +
 lib/rules/jsx-curly-brace-presence.js       |  5 +++++
 tests/lib/rules/jsx-curly-brace-presence.js | 22 +++++++++++++++++++++
 4 files changed, 30 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5368b58dd0..5322f51355 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,7 +14,9 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 * [`static-property-placement`]: do not report non-components ([#2893][] @golopot)
 * [`no-array-index-key`]: support optional chaining ([#2897][] @SyMind)
 * [`no-typos`]: avoid a crash on bindingless `prop-types` import; add warning ([#2899][] @ljharb)
+* [`jsx-curly-brace-presence`]: ignore containers with comments ([#2900][] @golopot)
 
+[#2900]: https://github.com/yannickcr/eslint-plugin-react/pull/2900
 [#2899]: https://github.com/yannickcr/eslint-plugin-react/issues/2899
 [#2897]: https://github.com/yannickcr/eslint-plugin-react/pull/2897
 [#2895]: https://github.com/yannickcr/eslint-plugin-react/issues/2895
diff --git a/docs/rules/jsx-curly-brace-presence.md b/docs/rules/jsx-curly-brace-presence.md
index a2c4f180b9..ee8fae8149 100644
--- a/docs/rules/jsx-curly-brace-presence.md
+++ b/docs/rules/jsx-curly-brace-presence.md
@@ -151,6 +151,7 @@ Examples of **correct** code for this rule, even when configured with `"never"`:
  */
 <App>{' '}</App>
 <App>{'     '}</App>
+<App>{/* comment */ <Bpp />}</App> // the comment makes the container necessary 
 ```
 
 ## When Not To Use It
diff --git a/lib/rules/jsx-curly-brace-presence.js b/lib/rules/jsx-curly-brace-presence.js
index 2161c60cb2..6223ddff7e 100755
--- a/lib/rules/jsx-curly-brace-presence.js
+++ b/lib/rules/jsx-curly-brace-presence.js
@@ -235,6 +235,11 @@ module.exports = {
       const expression = JSXExpressionNode.expression;
       const expressionType = expression.type;
 
+      // Curly braces containing comments are necessary
+      if (context.getSourceCode().getCommentsInside(JSXExpressionNode).length > 0) {
+        return;
+      }
+
       if (
         (expressionType === 'Literal' || expressionType === 'JSXText')
           && typeof expression.value === 'string'
diff --git a/tests/lib/rules/jsx-curly-brace-presence.js b/tests/lib/rules/jsx-curly-brace-presence.js
index 841b557333..99ce6dc195 100755
--- a/tests/lib/rules/jsx-curly-brace-presence.js
+++ b/tests/lib/rules/jsx-curly-brace-presence.js
@@ -417,6 +417,28 @@ ruleTester.run('jsx-curly-brace-presence', rule, {
         };
       `,
       options: [{props: 'never', children: 'never'}]
+    },
+    {
+      code: `<App>{/* comment */}</App>`
+    },
+    {
+      code: `<App>{/* comment */ <Foo />}</App>`
+    },
+    {
+      code: `<App>{/* comment */ 'foo'}</App>`
+    },
+    {
+      code: `<App prop={/* comment */ 'foo'} />`
+    },
+    {
+      code: `
+        <App>
+          {
+            // comment
+            <Foo />
+          }
+        </App>
+      `
     }
   ],