[Fix] jsx-handler-names: handle whitespace

Fixes #2785
jsx-eslint · Sep 6, 2020 · 9ce69a2 · 9ce69a2
1 parent de2ec66
commit 9ce69a2
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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: [{