From 9ce69a299ef8b63cc5e982ec1d46a1c7a173c92b Mon Sep 17 00:00:00 2001
From: Ari Perkkio <ari.perkkio@gmail.com>
Date: Sun, 6 Sep 2020 15:55:25 +0300
Subject: [PATCH] [Fix] `jsx-handler-names`: handle whitespace

Fixes #2785
---
 CHANGELOG.md                         |  2 ++
 lib/rules/jsx-handler-names.js       |  1 +
 tests/lib/rules/jsx-handler-names.js | 14 ++++++++++++++
 3 files changed, 17 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 79b22a31bb..f4e364fc20 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,7 +13,9 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 * [`function-component-definition`]: ignore object properties ([#2771][] @stefan-wullems)
 * [`forbid-component-props`]: Implemented support for "namespaced" components ([#2767][] @mnn)
 * [`prefer-read-only-props`]: support Flow `$ReadOnly` ([#2772][], [#2779][], [#2770][] @karolina-benitez)
+* [`jsx-handler-names`]: handle whitespace ([#2789][] @AriPerkkio)
 
+[#2789]: https://github.com/yannickcr/eslint-plugin-react/pull/2789
 [#2779]: https://github.com/yannickcr/eslint-plugin-react/pull/2779
 [#2772]: https://github.com/yannickcr/eslint-plugin-react/pull/2772
 [#2771]: https://github.com/yannickcr/eslint-plugin-react/pull/2771
diff --git a/lib/rules/jsx-handler-names.js b/lib/rules/jsx-handler-names.js
index 52879ef9c4..73c4c42372 100644
--- a/lib/rules/jsx-handler-names.js
+++ b/lib/rules/jsx-handler-names.js
@@ -121,6 +121,7 @@ module.exports = {
         const expression = node.value.expression;
         const propValue = context.getSourceCode()
           .getText(checkInlineFunction && isInlineHandler(node) ? expression.body.callee : expression)
+          .replace(/\s*/g, '')
           .replace(/^this\.|.*::/, '');
 
         if (propKey === 'ref') {
diff --git a/tests/lib/rules/jsx-handler-names.js b/tests/lib/rules/jsx-handler-names.js
index a167e9a11e..682064b2e2 100644
--- a/tests/lib/rules/jsx-handler-names.js
+++ b/tests/lib/rules/jsx-handler-names.js
@@ -32,6 +32,20 @@ ruleTester.run('jsx-handler-names', rule, {
     code: '<TestComponent onChange={this.handleChange} />'
   }, {
     code: '<TestComponent onChange={this.props.onChange} />'
+  },
+  {
+    code: `<TestComponent
+              onChange={
+                this
+                  .handleChange
+              } />`
+  }, {
+    code: `<TestComponent
+              onChange={
+                this
+                  .props
+                  .handleChange
+              } />`
   }, {
     code: '<TestComponent onChange={handleChange} />',
     options: [{