From 03dd05ac277e020372b1abe5ce327746afdb3cc6 Mon Sep 17 00:00:00 2001
From: Toni Petrina <tonipetrina@hotmail.com>
Date: Wed, 6 Jun 2018 12:20:27 +0200
Subject: [PATCH 1/3] Updating SFC example

---
 README.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b08ddb73..939da871 100644
--- a/README.md
+++ b/README.md
@@ -107,7 +107,13 @@ Or you can use the provided generic type for functional components:
 const App: React.SFC<{ message: string }> = ({ message }) => <div>{message}</div>;
 ```
 
-Quite frankly I prefer the former pattern as it's shorter.
+Quite frankly I prefer the former pattern as it's shorter. However, if you need to use `children` property inside the function body, in the former case it has to be added explicitly. `SFC<T>` already includes the correctly typed `children` property which then doesn't have to become part of your type.
+
+```tsx
+const Title: React.SFC<{ title: string }> = ({ children, title }) => (
+    <div title={title}>{children}</div>
+);
+```
 
 [Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
 

From d15c3dcfecc9966453f8310268da3992c3597682 Mon Sep 17 00:00:00 2001
From: tsiq-swyx <35976578+tsiq-swyx@users.noreply.github.com>
Date: Wed, 6 Jun 2018 18:10:30 -0400
Subject: [PATCH 2/3] add detail/summary wrapper

---
 README.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 939da871..06c44d0c 100644
--- a/README.md
+++ b/README.md
@@ -107,7 +107,11 @@ Or you can use the provided generic type for functional components:
 const App: React.SFC<{ message: string }> = ({ message }) => <div>{message}</div>;
 ```
 
-Quite frankly I prefer the former pattern as it's shorter. However, if you need to use `children` property inside the function body, in the former case it has to be added explicitly. `SFC<T>` already includes the correctly typed `children` property which then doesn't have to become part of your type.
+<details>
+
+<summary><b>Discussion</b></summary>
+
+The former pattern is shorter, so why would people use `React.SFC` at all? If you need to use `children` property inside the function body, in the former case it has to be added explicitly. `SFC<T>` already includes the correctly typed `children` property which then doesn't have to become part of your type.
 
 ```tsx
 const Title: React.SFC<{ title: string }> = ({ children, title }) => (
@@ -117,6 +121,8 @@ const Title: React.SFC<{ title: string }> = ({ children, title }) => (
 
 [Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
 
+</details>
+
 ## Stateful Class-based Components
 
 Within Typescript, `React.Component` is a generic type (aka `React.Component<PropType, StateType>`), so you actually want to provide it with prop and (optionally) state types:

From 6fc57d669a927be0821283d7181327a0a1e1d81a Mon Sep 17 00:00:00 2001
From: tsiq-swyx <35976578+tsiq-swyx@users.noreply.github.com>
Date: Wed, 6 Jun 2018 18:11:51 -0400
Subject: [PATCH 3/3] add attribution

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 06c44d0c..1b5e7a50 100644
--- a/README.md
+++ b/README.md
@@ -93,7 +93,7 @@ Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatshee
 
 ## Stateless Functional Components
 
-*Contributed by: [@jasanst](https://github.com/sw-yx/react-typescript-cheatsheet/pull/9)*
+*Contributed by: [@jasanst](https://github.com/sw-yx/react-typescript-cheatsheet/pull/9) and [@tpetrina](https://github.com/sw-yx/react-typescript-cheatsheet/pull/21)*
 
 You can specify the type of props as you destructure them: