From 20103c53152eb1a3ebc4bc3b239458a49fd22478 Mon Sep 17 00:00:00 2001
From: stefanwullems <stefan@exivity.com>
Date: Wed, 26 Aug 2020 19:15:43 +0200
Subject: [PATCH] [Fix] `function-component-definition`: ignore object
 properties

Fixes #2765.
---
 CHANGELOG.md                                  |   4 +
 lib/rules/function-component-definition.js    |   3 +
 .../rules/function-component-definition.js    | 138 ++++++++++++++++++
 3 files changed, 145 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07253c982d..e856eeecae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,10 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 ### Added
 * [`button-has-type`]: support trivial ternary expressions ([#2748][] @Hypnosphi)
 
+### Fixed
+* [`function-component-definition`]: ignore object properties ([#2771][] @stefan-wullems)
+
+[#2771]: https://github.com/yannickcr/eslint-plugin-react/pull/2771
 [#2748]: https://github.com/yannickcr/eslint-plugin-react/pull/2748
 
 ## [7.20.6] - 2020.08.12
diff --git a/lib/rules/function-component-definition.js b/lib/rules/function-component-definition.js
index e782d7cd31..a8fd95e511 100644
--- a/lib/rules/function-component-definition.js
+++ b/lib/rules/function-component-definition.js
@@ -156,6 +156,9 @@ module.exports = {
 
     function validate(node, functionType) {
       if (!components.get(node)) return;
+
+      if (node.parent && node.parent.type === 'Property') return;
+
       if (hasName(node) && namedConfig !== functionType) {
         report(node, {
           message: ERROR_MESSAGES[namedConfig],
diff --git a/tests/lib/rules/function-component-definition.js b/tests/lib/rules/function-component-definition.js
index f75338592f..178b2b79f9 100644
--- a/tests/lib/rules/function-component-definition.js
+++ b/tests/lib/rules/function-component-definition.js
@@ -166,6 +166,144 @@ ruleTester.run('function-component-definition', rule, {
     code: 'function Hello(props): ReactNode { return <p/> }',
     options: [{namedComponents: 'function-declaration'}],
     parser: parsers.TYPESCRIPT_ESLINT
+  },
+  // https://github.com/yannickcr/eslint-plugin-react/issues/2765
+  {
+    code: [
+      'const obj = {',
+      '  serialize: (el) => {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'function-declaration'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: (el) => {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'arrow-function'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: (el) => {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'function-expression'}]
+  },
+  {
+    code: [
+      'const obj = {',
+      '  serialize: function (el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'function-declaration'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: function (el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'arrow-function'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: function (el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'function-expression'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize(el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'function-declaration'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize(el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'arrow-function'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize(el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'function-expression'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize(el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{unnamedComponents: 'arrow-function'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize(el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{unnamedComponents: 'function-expression'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: (el) => {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{unnamedComponents: 'arrow-function'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: (el) => {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{unnamedComponents: 'function-expression'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: function (el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{unnamedComponents: 'arrow-function'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: function (el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{unnamedComponents: 'function-expression'}]
   }],
 
   invalid: [{