added three new updater class and functinonal based components

src/App.js

@@ -24,6 +24,9 @@ import Component1 from "./Components/UseContext/Component1";
 
 // useContext
 import UsingUseContext from "./Components/UseContext/UsingUseContext";
+import MyCounter from "./Components/MyCounter";
+import IncreaseDecreaseCount from "./Components/IncreaseDecreaseCount";
+import UseEffectForTitle from "./Components/UseEffectForTitle";
 
 // First creat context
 export const MyContext = React.createContext();
@@ -32,6 +35,9 @@ function App() {
   return (
     <div className="App">
       <UsingClassLifeCycleComponent />
+      <MyCounter />
+      <IncreaseDecreaseCount />
+      <UseEffectForTitle />
     </div>
   );
 }

src/Components/CounterDisplayer.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+
+ class CounterDisplayer extends Component {
+  render() {
+    return (
+      <div>
+        <h1>All Clicks Counter: {this.props.countVal}</h1>
+      </div>
+    )
+  }
+}
+export default CounterDisplayer

src/Components/EvenCounterDisplayer.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+
+ class EvenCounterDisplayer extends Component {
+  render() {
+    return (
+      <div>
+        <h1>Even Clicks Counter: {this.props.evenCount}</h1>
+      </div>
+    )
+  }
+}
+export default EvenCounterDisplayer;

src/Components/IncreaseDecreaseCount.js

@@ -0,0 +1,34 @@
+import React,{ useState} from 'react'
+
+function IncreaseDecreaseCount() {
+
+const [count,setCount]=useState(0);
+
+ const increament=()=>{
+    setCount((count)=>{
+        return count+1;
+    })
+}
+ const decreament=()=>{
+    setCount((count)=>{
+       return count-1})
+}
+const reset=()=>{
+    setCount((count)=>{
+        return 0;
+    })
+}
+
+  return (
+    <div>
+<hr />
+<h2>Question 3</h2>
+        <h1>Initial click count:{count}</h1>
+
+
+        <button onClick={reset}>Reset count</button><button onClick={increament}>Increase count</button><button onClick={decreament}>Decrease count</button>
+    </div>
+  )
+}
+
+export default IncreaseDecreaseCount

src/Components/MyCounter.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import CounterDisplayer from './CounterDisplayer';
+import EvenCounterDisplayer from './EvenCounterDisplayer';
+
+ class MyCounter extends Component {
+constructor(){
+    super();
+    this.state={
+        count:0,
+    }
+}
+
+allClicksCounter = () =>{
+    this.setState((state) =>{
+        return {count:state.count+1}
+    })
+}
+
+
+
+  render() {
+    let even;
+    if(this.state.count%2==0){
+        even=this.state.count;
+    }else{
+        even=this.state.count-1
+    }
+
+
+
+
+    return (
+      <div>
+        <button onClick={this.allClicksCounter}>Click here</button>
+        <CounterDisplayer countVal={this.state.count}/>
+        <EvenCounterDisplayer evenCount={even}/>
+      </div>
+    )
+  }
+} 
+export default MyCounter

src/Components/UseEffectForTitle.js

@@ -0,0 +1,30 @@
+import React, { useState,useEffect} from 'react'
+
+function UseEffectForTitle() {
+
+const [count,setCount]=useState(0);
+useEffect(()=>{
+    alert("Component is mounted");
+},[])
+
+useEffect(()=>{
+document.title=`TitleCount: ${count}`;
+},[count])
+
+const increament=()=>{
+    setCount((count)=>{
+        return count+1;
+    })
+}
+
+  return (
+    <div>
+<hr />
+<h2>Question 4</h2>
+<button onClick={increament}>Click here</button>
+<h1>Count displayer: {count}</h1>
+    </div>
+  )
+}
+
+export default UseEffectForTitle