Exporting anonymous function components React Typescript

Question

I've just recently started using Typescript and I haven't found an easy way to achieve this

import React from 'react'
...
export default () => <div>My awesome anonymous functional component</div>;

I normally use this within an index.jsx / index.tsx file so the syntax helps my component stay clean.

Answer 1

You should still be able to do that without issues, but the syntax I prefer is the following:

export const MyComponent: React.FC = () => <div>My component</div>

I tend to avoid using default exports in typescript for some of the reasons mentioned here: https://basarat.gitbook.io/typescript/main-1/defaultisbad

Also, with the above, I'll get the necessary typings for a functional component such as children, etc.