Skip to content

Commit f0bd7c5

Browse files
Remove details on pitfalls that are no longer valid (#633)
1 parent 06271e0 commit f0bd7c5

File tree

2 files changed

+0
-64
lines changed

2 files changed

+0
-64
lines changed

README.md

-32
Original file line numberDiff line numberDiff line change
@@ -275,38 +275,6 @@ In most cases it makes very little difference which syntax is used, but you may
275275

276276
</details>
277277

278-
<details>
279-
<summary><b>Minor Pitfalls</b></summary>
280-
281-
These patterns are not supported:
282-
283-
**Conditional rendering**
284-
285-
```tsx
286-
const MyConditionalComponent = ({ shouldRender = false }) =>
287-
shouldRender ? <div /> : false; // don't do this in JS either
288-
const el = <MyConditionalComponent />; // throws an error
289-
```
290-
291-
This is because due to limitations in the compiler, function components cannot return anything other than a JSX expression or `null`, otherwise it complains with a cryptic error message saying that the other type is not assignable to `Element`.
292-
293-
**Array.fill**
294-
295-
```tsx
296-
const MyArrayComponent = () => Array(5).fill(<div />);
297-
const el2 = <MyArrayComponent />; // throws an error
298-
```
299-
300-
Unfortunately just annotating the function type will not help so if you really need to return other exotic types that React supports, you'd need to perform a type assertion:
301-
302-
```tsx
303-
const MyArrayComponent = () => Array(5).fill(<div />) as any as JSX.Element;
304-
```
305-
306-
[See commentary by @ferdaber here](https://github.com/typescript-cheatsheets/react/issues/57).
307-
308-
</details>
309-
310278
<!--END-SECTION:function-components-->
311279

312280
<!--START-SECTION:hooks-->

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

-32
Original file line numberDiff line numberDiff line change
@@ -99,35 +99,3 @@ const VoidFunctionComponent: React.VoidFunctionComponent<Props> = ({
9999
In most cases it makes very little difference which syntax is used, but you may prefer the more explicit nature of `React.FunctionComponent`.
100100

101101
</details>
102-
103-
<details>
104-
<summary><b>Minor Pitfalls</b></summary>
105-
106-
These patterns are not supported:
107-
108-
**Conditional rendering**
109-
110-
```tsx
111-
const MyConditionalComponent = ({ shouldRender = false }) =>
112-
shouldRender ? <div /> : false; // don't do this in JS either
113-
const el = <MyConditionalComponent />; // throws an error
114-
```
115-
116-
This is because due to limitations in the compiler, function components cannot return anything other than a JSX expression or `null`, otherwise it complains with a cryptic error message saying that the other type is not assignable to `Element`.
117-
118-
**Array.fill**
119-
120-
```tsx
121-
const MyArrayComponent = () => Array(5).fill(<div />);
122-
const el2 = <MyArrayComponent />; // throws an error
123-
```
124-
125-
Unfortunately just annotating the function type will not help so if you really need to return other exotic types that React supports, you'd need to perform a type assertion:
126-
127-
```tsx
128-
const MyArrayComponent = () => Array(5).fill(<div />) as any as JSX.Element;
129-
```
130-
131-
[See commentary by @ferdaber here](https://github.com/typescript-cheatsheets/react/issues/57).
132-
133-
</details>

0 commit comments

Comments
 (0)