Merge pull request #101 from arvish-codal/8_June

Class Components with TypeScript

Author: arvish-codal

react-typescript/react-typescript-demo/src/App.tsx

@@ -12,6 +12,7 @@ import { ThemeContextProvider } from './components/context/ThemeContext';
 import { Box } from './components/context/Box';
 import { UserContextProvider } from './components/context/UserContext';
 import { User } from './components/context/User';
+import { Counter } from './components/class/Counter';
 
 function App() {
 
@@ -66,10 +67,11 @@ function App() {
       </ThemeContextProvider> */}
 
       {/* For Video-107 */}
-      <UserContextProvider>
+      {/* <UserContextProvider>
         <User />
-      </UserContextProvider>
+      </UserContextProvider> */}
 
+      <Counter message='The count value is' />
 
     </div>
   );

react-typescript/react-typescript-demo/src/components/class/Counter.tsx

@@ -0,0 +1,29 @@
+import { Component } from "react";
+
+type CounterProps = {
+    message: string
+}
+
+type CounterState = {
+    count: number
+}
+
+// The count value is 5
+export class Counter extends Component<CounterProps, CounterState> {
+    state = {
+        count: 0,
+    }
+
+    handleClick = () => {
+        this.setState((prevState) => ({ count: prevState.count + 1 }))
+    }
+
+    render() {
+        return (
+            <div>
+                <button onClick={this.handleClick}>Increment</button>
+                {this.props.message} {this.state.count}
+            </div>
+        )
+    }
+}