title: Struggling with TypeScript, React, Eslint and simple Arrow Functions components
body: <p>I have been struggling all morning with this issue and couldn't find the solution anywhere. I am new to typescript, and I am trying to set it up properly with Eslint and Prettier to ensure the code is properly formated.</p>
  <p>So, the issue I am facing when creating functional components. As per the cheatsheet, I am trying to export a simple component such as:</p>
  <pre><code>import React from &quot;react&quot;;
  
  type DivProps = {
    text: string;
  };
  
  const Div = ({ text }: DivProps): JSX.Element =&gt; (&lt;div&gt;{text}&lt;/div&gt;)
  
  export default Div;
  </code></pre>
  <p>However, eslint is complaining, saying that &quot;Function component is not a function expression&quot;.</p>
  <p>When running fix, it will convert my function to an unnamed function:</p>
  <pre><code>const Div = function ({ text }: DivProps): JSX.Element {
    return &lt;div&gt;{text}&lt;/div&gt;;
  };
  </code></pre>
  <p>And then it will complain saying &quot;Unexpected unnamed function.&quot;.</p>
  <p>Even if I try to refactor the function to:</p>
  <pre><code>function Div({ text }: DivProps): JSX.Element {
    return &lt;div&gt;{text}&lt;/div&gt;;
  };
  </code></pre>
  <p>I still get the same error saying that &quot;Function component is not a function expression&quot;.</p>
  <p>My .eslintrc.js file is:</p>
  <pre><code>module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [&quot;airbnb&quot;, &quot;plugin:@typescript-eslint/recommended&quot;, &quot;prettier&quot;],
    parser: &quot;@typescript-eslint/parser&quot;,
    parserOptions: {
      ecmaFeatures: {
        jsx: true,
      },
      ecmaVersion: 12,
      sourceType: &quot;module&quot;,
    },
    plugins: [&quot;@typescript-eslint&quot;, &quot;react-hooks&quot;, &quot;prettier&quot;],
    rules: {
      &quot;react-hooks/rules-of-hooks&quot;: &quot;error&quot;,
      &quot;prettier/prettier&quot;: &quot;error&quot;,
      &quot;no-use-before-define&quot;: &quot;off&quot;,
      &quot;@typescript-eslint/no-use-before-define&quot;: [&quot;error&quot;],
      &quot;react/jsx-filename-extension&quot;: [
        1,
        {
          extensions: [&quot;.tsx&quot;],
        },
      ],
      &quot;import/prefer-default-export&quot;: &quot;off&quot;,
      &quot;import/extensions&quot;: [
        &quot;error&quot;,
        &quot;ignorePackages&quot;,
        {
          ts: &quot;never&quot;,
          tsx: &quot;never&quot;,
        },
      ],
    },
    settings: {
      &quot;import/resolver&quot;: {
        typescript: {},
      },
    },
  };
  </code></pre>
  <p>Appreciate any help on this!</p>
  <p>PS: If you see any other thing you would amend/improve in the eslintrc file let me know. As I mentioned, I am new to TypeScript so I am still trying to find out the best options for linting.</p>
  <p>Cheers!</p>
  <p>Alejandro</p>