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.

Alex K · Accepted Answer · 2020-06-09 18:29:23Z

2

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.

answered Jun 9, 2020 at 18:29

Alex K

8904 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1