Skip to content

Commit 309d65a

Browse files
authored
add React.FC example with predefined type
To show a fair comparison between the different approaches on how to type a react component in a readable way, the React.FC<AppProps> approach should be also listed. It may be technically similar but has the best readability from my experience. (left to right instead right to left)
1 parent 09217c9 commit 309d65a

File tree

1 file changed

+4
-0
lines changed

1 file changed

+4
-0
lines changed

docs/basic/getting-started/function-components.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ const App = ({ message }: { message: string }) => <div>{message}</div>;
2525
const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
2626
<div>{message}</div>
2727
);
28+
// or
29+
const App: React.FC<AppProps> = ({ message }) => (
30+
<div>{message}</div>
31+
);
2832
```
2933

3034
> Tip: You might use [Paul Shen's VS Code Extension](https://marketplace.visualstudio.com/items?itemName=paulshen.paul-typescript-toolkit) to automate the type destructure declaration (incl a [keyboard shortcut](https://twitter.com/_paulshen/status/1392915279466745857?s=20)).

0 commit comments

Comments
 (0)