From 44a0600af91c5e4bae62ebb9f9428bdc483122f7 Mon Sep 17 00:00:00 2001
From: Kenvin Davies <kevindavies8888@gmail.com>
Date: Tue, 9 Apr 2019 01:29:36 -0400
Subject: [PATCH] use "reverse" defaultProp type pattern

as suggested in https://github.com/sw-yx/react-typescript-cheatsheet/pull/103
---
 README.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 5080b1c..d63f0ec 100644
--- a/README.md
+++ b/README.md
@@ -432,24 +432,24 @@ const Greet = (props: Props) => {
   /*...*/
 };
 Greet.defaultProps = defaultProps
+```
 
-// ////////////////
-// class components
-// ////////////////
-export type Props = {
-  name: string;
-};
+For **Class components**, there are [a couple ways to do it](https://github.com/sw-yx/react-typescript-cheatsheet/pull/103#issuecomment-481061483)(including using the `Pick` utility type) but the recommendation is to "reverse" the props definition:
 
-export class Greet extends React.Component<Props> {
-  render() {
-    const { name } = this.props;
-    return <div>Hello ${name.toUpperCase()}!</div>;
+```tsx
+type GreetProps = typeof Greet.defaultProps & {
+  age: number
+}
+
+class Greet extends React.Component<GreetProps> {
+  static defaultProps = {
+    name: 'world'
   }
-  static defaultProps: Partial<Props> = { name: 'world' };
+  /*...*/
 }
 
 // Type-checks! No type assertions needed!
-let el = <Greet />;
+let el = <Greet age={3} />;
 ```
 <details>
   <summary>Why does React.FC break defaultProps?</summary>