From 7119ca3dec010475bb6f3394655aede546bb6fb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Tammerg=C3=A5rd?= <filip@tammergard.se>
Date: Wed, 2 Aug 2023 21:00:19 +0200
Subject: [PATCH] Remove details on pitfalls that are no longer valid

---
 README.md                                     | 32 -------------------
 .../getting-started/function-components.md    | 32 -------------------
 2 files changed, 64 deletions(-)

diff --git a/README.md b/README.md
index f47fb612..9eee22a2 100644
--- a/README.md
+++ b/README.md
@@ -275,38 +275,6 @@ In most cases it makes very little difference which syntax is used, but you may
 
 </details>
 
-<details>
-<summary><b>Minor Pitfalls</b></summary>
-
-These patterns are not supported:
-
-**Conditional rendering**
-
-```tsx
-const MyConditionalComponent = ({ shouldRender = false }) =>
-  shouldRender ? <div /> : false; // don't do this in JS either
-const el = <MyConditionalComponent />; // throws an error
-```
-
-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`.
-
-**Array.fill**
-
-```tsx
-const MyArrayComponent = () => Array(5).fill(<div />);
-const el2 = <MyArrayComponent />; // throws an error
-```
-
-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:
-
-```tsx
-const MyArrayComponent = () => Array(5).fill(<div />) as any as JSX.Element;
-```
-
-[See commentary by @ferdaber here](https://github.com/typescript-cheatsheets/react/issues/57).
-
-</details>
-
 <!--END-SECTION:function-components-->
 
 <!--START-SECTION:hooks-->
diff --git a/docs/basic/getting-started/function-components.md b/docs/basic/getting-started/function-components.md
index 23032d28..3acc13c9 100644
--- a/docs/basic/getting-started/function-components.md
+++ b/docs/basic/getting-started/function-components.md
@@ -99,35 +99,3 @@ const VoidFunctionComponent: React.VoidFunctionComponent<Props> = ({
 In most cases it makes very little difference which syntax is used, but you may prefer the more explicit nature of `React.FunctionComponent`.
 
 </details>
-
-<details>
-<summary><b>Minor Pitfalls</b></summary>
-
-These patterns are not supported:
-
-**Conditional rendering**
-
-```tsx
-const MyConditionalComponent = ({ shouldRender = false }) =>
-  shouldRender ? <div /> : false; // don't do this in JS either
-const el = <MyConditionalComponent />; // throws an error
-```
-
-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`.
-
-**Array.fill**
-
-```tsx
-const MyArrayComponent = () => Array(5).fill(<div />);
-const el2 = <MyArrayComponent />; // throws an error
-```
-
-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:
-
-```tsx
-const MyArrayComponent = () => Array(5).fill(<div />) as any as JSX.Element;
-```
-
-[See commentary by @ferdaber here](https://github.com/typescript-cheatsheets/react/issues/57).
-
-</details>