ReactJS Tutorial - 13 - Event Handling

Author: anisiqbal

src/App.js

@@ -6,23 +6,27 @@ import Hello from './components/Hello';
 import Message from './components/Message';
 import Counter from './components/Counter'
 import Setstate from './components/Setstate';
+import FunctionClick from './components/FunctionClick';
+import ClassClick from './components/ClassClick';
 
 function App() {
   return (
     <div className="App">
+        
+        <FunctionClick/>
+        <ClassClick/>
+       {/* <Setstate/> */}
+       {/* <Counter/> */}
+       {/* <Message/> */}
+       {/* { <Greet name="Bruce" heroName="Batman" />
+       <Greet name="Clark" heroName="Superman"/> */}
+       {/* <Greet name="Diana" heroName="wonder Woman" /> */}
 
-      <Setstate/>
-
-    {/* <Counter/> */}
-      {/* <Message/> */}
-       {/* <Greet name="Bruce" heroName="Batman" />
-       <Greet name="Clark" heroName="Superman"/>
-       <Greet name="Diana" heroName="wonder Woman" />
-
-      < Welcome name="Bruce" heroName="Batman" />
-      < Welcome name="Clark" heroName="Superman"/>
-      < Welcome name="Diana" heroName="wonder Woman" /> */}
-      {/* <Hello/> */}
+       {/* < Welcome name="Bruce" heroName="Batman" /> */}
+ 
+       {/* < Welcome name="Clark" heroName="Superman"/>
+      < Welcome name="Diana" heroName="wonder Woman" />  */}
+      {/* <Hello/> */} 
     </div>
   );
 }

src/components/ClassClick.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+
+ class ClassClick extends Component {
+
+    // METHOD
+
+    clickHandler(){
+        console.log('Clicked the button')
+    }
+
+
+
+    render() {
+        return (
+            <div>
+                <button onClick = {this.clickHandler}>Click me</button>
+            </div>
+        )
+    }
+}
+
+export default ClassClick
+
+

src/components/Counter.js

@@ -6,16 +6,22 @@ constructor(props) {
     super(props)
 
     this.state = {
-        count: 0,
-        name: ''
+        count: 0    
+        
     }
 }
 
     increment() {
-        const updatedCount = this.state.count + 1;
-        this.setState({count: updatedCount});
+        this.setState({
+                count: this.state.count + 1
+        }, 
+        () => { 
+            console.log('Callback value', this.state.count )
+        }
 
-        console.log(updatedCount);
+        );
+
+        console.log(this.state.count);
     }
 
     render() {

src/components/FunctionClick.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+function FunctionClick() {
+
+function clickHandler (){
+    console.log('Button clicked')
+}
+
+    return (
+        <div>
+            <button onClick={clickHandler}>Click</button> 
+        </div>
+    )
+}
+
+export default FunctionClick

src/components/Welcome.js

@@ -2,9 +2,11 @@
 
         class Welcome extends Component {
             render() {
+                const { name, heroName} = this.props
+                // const {state1, state2}= this.state
                 return( 
                     <h1>
-                     Welcome {this.props.name} a.k.a {this.props.heroName}   
+                     Welcome {name} a.k.a {heroName}   
                         </h1>
 
                 );

src/components/greet.js

@@ -6,11 +6,34 @@ import React from 'react';
 //     );
 //     }
 
-export const Greet = props => {
-    console.log(props);
-    return(
-        <h1>Hello {props.name} a.k.a {props.heroName} </h1>
-    );
-}
-
-// export default Greet;
+//     // export const Greet = ({name,heroName}) => {
+    
+//     // return(
+//     //     <div>
+//     //     <h1>
+//     //         Hello {name} a.k.a {heroName}
+//     //      </h1>
+//     //     </div>
+//     // );
+// }
+
+  export   const Greet = props => {
+        const {name , heroName} = props
+        return(
+            <div>
+            <h1>
+                Hello {name} a.k.a {heroName}
+             </h1>
+            </div>
+        );
+    }
+
+  
+
+
+
+
+
+
+
+