[Fix] function-component-definition: do not break on dollar signs

Fixes #3207

Author: ljharb

CHANGELOG.md

@@ -23,6 +23,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`prop-types`/`propTypes`]: follow a returned identifier to see if it is JSX ([#1046][] @ljharb)
 * [`no-unused-state`]: TS: support `getDerivedStateFromProps` as an arrow function ([#2061][] @ljharb)
 * [`no-array-index-key`]: catch `.toString` and `String()` usage ([#2813][] @RedTn)
+* [`function-component-definition`]: do not break on dollar signs ([#3207][] @ljharb)
 
 ### Changed
 * [readme] change [`jsx-runtime`] link from branch to sha ([#3160][] @tatsushitoji)
@@ -36,6 +37,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [Docs] [`jsx-no-target-blank`]: fix syntax highlighting ([#3199][] @shamrin)
 * [Docs] [`jsx-key`]: improve example ([#3202][] @chnakamura)
 
+[#3207]: https://github.com/yannickcr/eslint-plugin-react/issues/3207
 [#3202]: https://github.com/yannickcr/eslint-plugin-react/pull/3202
 [#3199]: https://github.com/yannickcr/eslint-plugin-react/pull/3199
 [#3198]: https://github.com/yannickcr/eslint-plugin-react/pull/3198

lib/rules/function-component-definition.js

@@ -16,7 +16,7 @@ const reportC = require('../util/report');
 
 function buildFunction(template, parts) {
   return Object.keys(parts)
-    .reduce((acc, key) => acc.replace(`{${key}}`, parts[key] || ''), template);
+    .reduce((acc, key) => acc.replace(`{${key}}`, () => (parts[key] || '')), template);
 }
 
 const NAMED_FUNCTION_TEMPLATES = {

tests/lib/rules/function-component-definition.js

@@ -969,5 +969,35 @@ ruleTester.run('function-component-definition', rule, {
       options: [{ namedComponents: ['function-expression', 'function-declaration'] }],
       errors: [{ messageId: 'function-expression' }],
     },
+    {
+      code: `
+        const genX = (symbol) => \`the symbol is \${symbol}\`;
+
+        const IndexPage = () => {
+          return (
+            <div>
+              Hello World.{genX('$')}
+            </div>
+          )
+        }
+        
+        export default IndexPage;
+      `,
+      output: `
+        const genX = (symbol) => \`the symbol is \${symbol}\`;
+
+        function IndexPage() {
+          return (
+            <div>
+              Hello World.{genX('$')}
+            </div>
+          )
+        }
+        
+        export default IndexPage;
+      `,
+      options: [{ namedComponents: ['function-declaration'] }],
+      errors: [{ messageId: 'function-declaration' }],
+    },
   ]),
 });