Added clear message for functional component starting with lowercase (#…

…18881)
facebook · May 10, 2020 · ddcc69c · ddcc69c
1 parent 539527b
commit ddcc69c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
@@ -916,7 +916,8 @@ function functionError(hook, fn) {
   return {
     message:
       `React Hook "${hook}" is called in function "${fn}" that is neither ` +
-      'a React function component nor a custom React Hook function.',
+      'a React function component nor a custom React Hook function.' +
+      ' React component names must start with an uppercase letter.',
   };
 }
 

diff --git a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
@@ -481,7 +481,8 @@ export default {
                 `React Hook "${context.getSource(hook)}" is called in ` +
                 `function "${context.getSource(codePathFunctionName)}" ` +
                 'that is neither a React function component nor a custom ' +
-                'React Hook function.';
+                'React Hook function.' +
+                ' React component names must start with an uppercase letter.';
               context.report({node: hook, message});
             } else if (codePathNode.type === 'Program') {
               // These are dangerous if you have inline requires enabled.