Skip to content

Commit 6fb15d7

Browse files
authored
Update README.md
1 parent 1ac2dec commit 6fb15d7

File tree

1 file changed

+10
-2
lines changed

1 file changed

+10
-2
lines changed

README.md

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,11 +125,19 @@ Or you can use the provided generic type for function components:
125125
const App: React.FunctionComponent<{ message: string }> = ({ message }) => <div>{message}</div>;
126126
```
127127

128+
If you want to use the `function` keyword instead of an arrow function, you can use this syntax (using a function expression, instead of declaration):
129+
130+
```tsx
131+
const App: React.FunctionComponent<{ message: string }> = function App({ message }) {
132+
return <div{message}</div>;
133+
}
134+
```
135+
128136
<details>
129137

130-
<summary><b>Whats the difference?</b></summary>
138+
<summary><b>What's the difference?</b></summary>
131139

132-
The former pattern is shorter, so why would people use `React.FunctionComponent` at all? If you need to use `children` property inside the function body, in the former case it has to be added explicitly. `FunctionComponent<T>` already includes the correctly typed `children` property which then doesn't have to become part of your type.
140+
The former pattern is shorter, so why would people use `React.FunctionComponent` at all? If you need to use `children` property inside the function body, in the former case it has to be added explicitly. `FunctionComponent<T>` already includes the correctly typed `children` property which then doesn't have to become part of your type. Typing your function explicitly will also give you typechecking and autocomplete on its static properties, like `displayName`, `propTypes`, and `defaultProps`.
133141

134142
```tsx
135143
const Title: React.FunctionComponent<{ title: string }> = ({ children, title }) => (

0 commit comments

Comments
 (0)