Added clear message for functional component starting with lowercase (facebook#18881)

roheat · web-flow · commit ddcc69c83b59 · 2020-05-10T01:52:11.000+01:00
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.

Original file line number	Diff line number	Diff line change
`@@ -916,7 +916,8 @@ function functionError(hook, fn) {`
`916`	`916`	`return {`
`917`	`917`	`message:`
`918`	`918`	`React Hook "${hook}" is called in function "${fn}" that is neither ` +
`919`		`- 'a React function component nor a custom React Hook function.',`
	`919`	`+ 'a React function component nor a custom React Hook function.' +`
	`920`	`+ ' React component names must start with an uppercase letter.',`
`920`	`921`	`};`
`921`	`922`	`}`
`922`	`923`