From cf476965d0b4e241cff24a146dc4eb0a36489939 Mon Sep 17 00:00:00 2001
From: James Russell <fizwidget@gmail.com>
Date: Sat, 23 Oct 2021 15:54:22 +1100
Subject: [PATCH] [Fix] `no-unstable-components`: improve handling of objects
 containing render function properties

---
 CHANGELOG.md                                  |   2 +
 lib/rules/no-unstable-nested-components.js    |  20 ++-
 .../rules/no-unstable-nested-components.js    | 133 ++++++++++++++++++
 3 files changed, 154 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1731915d1b..3ca8a10642 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,7 +16,9 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 * [`no-unused-prop-types`], `usedPropTypes`: avoid crash with typescript-eslint parser (@ljharb)
 * [`display-name`]: unwrap TS `as` expressions ([#3110][] @ljharb)
 * [`destructuring-assignment`]: detect refs nested in functions ([#3102] @ljharb)
+* [`no-unstable-components`]: improve handling of objects containing render function properties ([#3111] @fizwidget)
 
+[#3111]: https://github.com/yannickcr/eslint-plugin-react/pull/3111
 [#3110]: https://github.com/yannickcr/eslint-plugin-react/pull/3110
 [#3102]: https://github.com/yannickcr/eslint-plugin-react/issue/3102
 [#3092]: https://github.com/yannickcr/eslint-plugin-react/pull/3092
diff --git a/lib/rules/no-unstable-nested-components.js b/lib/rules/no-unstable-nested-components.js
index 306f2b9a9e..ca4ddff560 100644
--- a/lib/rules/no-unstable-nested-components.js
+++ b/lib/rules/no-unstable-nested-components.js
@@ -105,6 +105,19 @@ function isJSXAttributeOfExpressionContainerMatcher(node) {
   );
 }
 
+/**
+ * Matcher used to check whether given node is an object `Property`
+ * @param {ASTNode} node The AST node
+ * @returns {Boolean} True if node is a `Property`, false if not
+ */
+function isPropertyOfObjectExpressionMatcher(node) {
+  return (
+    node
+    && node.parent
+    && node.parent.type === 'Property'
+  );
+}
+
 /**
  * Matcher used to check whether given node is a `CallExpression`
  * @param {ASTNode} node The AST node
@@ -358,14 +371,19 @@ module.exports = {
     }
 
     /**
-     * Check whether given node is declared inside a component prop.
+     * Check whether given node is declared inside a component/object prop.
      * ```jsx
      * <Component footer={() => <div />} />
+     * { footer: () => <div /> }
      * ```
      * @param {ASTNode} node The AST node being checked
      * @returns {Boolean} True if node is a component declared inside prop, false if not
      */
     function isComponentInProp(node) {
+      if (isPropertyOfObjectExpressionMatcher(node)) {
+        return utils.isReturningJSX(node);
+      }
+
       const jsxAttribute = getClosestMatchingParent(node, context, isJSXAttributeOfExpressionContainerMatcher);
 
       if (!jsxAttribute) {
diff --git a/tests/lib/rules/no-unstable-nested-components.js b/tests/lib/rules/no-unstable-nested-components.js
index 3fdf7f3f38..2c7aea2130 100644
--- a/tests/lib/rules/no-unstable-nested-components.js
+++ b/tests/lib/rules/no-unstable-nested-components.js
@@ -383,6 +383,78 @@ ruleTester.run('no-unstable-nested-components', rule, {
       `,
       options: [{ allowAsProps: true }],
     },
+    {
+      code: `
+      function ParentComponent() {
+        return (
+          <SomeComponent>
+            {
+              thing.match({
+                renderLoading: () => <div />,
+                renderSuccess: () => <div />,
+                renderFailure: () => <div />,
+              })
+            }
+          </SomeComponent>
+        )
+      }
+      `,
+    },
+    {
+      code: `
+      function ParentComponent() {
+        const thingElement = thing.match({
+          renderLoading: () => <div />,
+          renderSuccess: () => <div />,
+          renderFailure: () => <div />,
+        });
+        return (
+          <SomeComponent>
+            {thingElement}
+          </SomeComponent>
+        )
+      }
+      `,
+    },
+    {
+      code: `
+      function ParentComponent() {
+        return (
+          <SomeComponent>
+            {
+              thing.match({
+                loading: () => <div />,
+                success: () => <div />,
+                failure: () => <div />,
+              })
+            }
+          </SomeComponent>
+        )
+      }
+      `,
+      options: [{
+        allowAsProps: true,
+      }],
+    },
+    {
+      code: `
+      function ParentComponent() {
+        const thingElement = thing.match({
+          loading: () => <div />,
+          success: () => <div />,
+          failure: () => <div />,
+        });
+        return (
+          <SomeComponent>
+            {thingElement}
+          </SomeComponent>
+        )
+      }
+      `,
+      options: [{
+        allowAsProps: true,
+      }],
+    },
     {
       code: `
         function ParentComponent() {
@@ -500,6 +572,9 @@ ruleTester.run('no-unstable-nested-components', rule, {
           return <Table rows={rows} />;
         }
       `,
+      options: [{
+        allowAsProps: true,
+      }],
     },
     /* TODO These minor cases are currently falsely marked due to component detection
     {
@@ -1042,5 +1117,63 @@ ruleTester.run('no-unstable-nested-components', rule, {
       // Only a single error should be shown. This can get easily marked twice.
       errors: [{ message: ERROR_MESSAGE }],
     },
+    {
+      code: `
+      function ParentComponent() {
+        return (
+          <SomeComponent>
+            {
+              thing.match({
+                loading: () => <div />,
+                success: () => <div />,
+                failure: () => <div />,
+              })
+            }
+          </SomeComponent>
+        )
+      }
+      `,
+      errors: [
+        { message: ERROR_MESSAGE_COMPONENT_AS_PROPS },
+        { message: ERROR_MESSAGE_COMPONENT_AS_PROPS },
+        { message: ERROR_MESSAGE_COMPONENT_AS_PROPS },
+      ],
+    },
+    {
+      code: `
+      function ParentComponent() {
+        const thingElement = thing.match({
+          loading: () => <div />,
+          success: () => <div />,
+          failure: () => <div />,
+        });
+        return (
+          <SomeComponent>
+            {thingElement}
+          </SomeComponent>
+        )
+      }
+      `,
+      errors: [
+        { message: ERROR_MESSAGE_COMPONENT_AS_PROPS },
+        { message: ERROR_MESSAGE_COMPONENT_AS_PROPS },
+        { message: ERROR_MESSAGE_COMPONENT_AS_PROPS },
+      ],
+    },
+    {
+      code: `
+      function ParentComponent() {
+        const rows = [
+          {
+            name: 'A',
+            notPrefixedWithRender: (props) => <Row {...props} />
+          },
+        ];
+
+        return <Table rows={rows} />;
+      }
+      `,
+      errors: [{ message: ERROR_MESSAGE_COMPONENT_AS_PROPS }],
+    },
   ]),
 });