[Fix] no-arrow-function-lifecycle: when converting from an arrow, remove the semi and wrapping parens

Fixes #3337

Author: ljharb

CHANGELOG.md

@@ -7,8 +7,10 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ### Fixed
 * [`no-unknown-property`]: add `dialog` attributes ([#3436][] @ljharb)
+* [`no-arrow-function-lifecycle`]: when converting from an arrow, remove the semi and wrapping parens ([#3337][] @ljharb)
 
 [#3436]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3436
+[#3337]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3337
 
 ## [7.31.8] - 2022.09.08
 

lib/rules/no-arrow-function-lifecycle.js

@@ -94,13 +94,15 @@ module.exports = {
             }
             bodyRange = [
               (previousComment.length > 0 ? previousComment[0] : body).range[0],
-              (nextComment.length > 0 ? nextComment[nextComment.length - 1] : body).range[1],
+              (nextComment.length > 0 ? nextComment[nextComment.length - 1] : body).range[1]
+                + (node.value.body.type === 'ObjectExpression' ? 1 : 0), // to account for a wrapped end paren
             ];
           }
           const headRange = [
             node.key.range[1],
             (previousComment.length > 0 ? previousComment[0] : body).range[0],
           ];
+          const hasSemi = node.value.expression && sourceCode.getText(node).slice(node.value.range[1] - node.range[0]) === ';';
 
           report(
             context,
@@ -119,7 +121,7 @@ module.exports = {
                 return [].concat(
                   fixer.replaceTextRange(headRange, getText(node)),
                   isBlockBody ? [] : fixer.replaceTextRange(
-                    bodyRange,
+                    [bodyRange[0], bodyRange[1] + (hasSemi ? 1 : 0)],
                     `{ return ${previousComment.map((x) => sourceCode.getText(x)).join('')}${sourceCode.getText(body)}${nextComment.map((x) => sourceCode.getText(x)).join('')}; }`
                   )
                 );

tests/lib/rules/no-arrow-function-lifecycle.js

@@ -987,5 +987,59 @@ ruleTester.run('no-arrow-function-lifecycle', rule, {
         }
       `,
     },
+    {
+      code: `
+        export default class Root extends Component {
+          getInitialState = () => ({
+            errorImporting: null,
+            errorParsing: null,
+            errorUploading: null,
+            file: null,
+            fromExtension: false,
+            importSuccess: false,
+            isImporting: false,
+            isParsing: false,
+            isUploading: false,
+            parsedResults: null,
+            showLongRunningMessage: false,
+          });
+        }
+      `,
+      features: ['class fields'],
+      errors: [{ message: 'getInitialState is a React lifecycle method, and should not be an arrow function or in a class field. Use an instance method instead.' }],
+      output: semver.satisfies(eslintPkg.version, '> 3') ? `
+        export default class Root extends Component {
+          getInitialState() { return {
+            errorImporting: null,
+            errorParsing: null,
+            errorUploading: null,
+            file: null,
+            fromExtension: false,
+            importSuccess: false,
+            isImporting: false,
+            isParsing: false,
+            isUploading: false,
+            parsedResults: null,
+            showLongRunningMessage: false,
+          }; }
+        }
+      ` : `
+        export default class Root extends Component {
+          getInitialState = () => ({
+            errorImporting: null,
+            errorParsing: null,
+            errorUploading: null,
+            file: null,
+            fromExtension: false,
+            importSuccess: false,
+            isImporting: false,
+            isParsing: false,
+            isUploading: false,
+            parsedResults: null,
+            showLongRunningMessage: false,
+          });
+        }
+      `,
+    },
   ]),
 });