[Fix] jsx-curly-brace-presence: ignore containers with comments

Fixes #2885

Author: chiawendt

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

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

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'

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>
+      `
     }
   ],