diff --git a/.idea/vcs.xml b/.idea/vcs.xml
index 94a25f7..c080647 100644
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -2,5 +2,6 @@
 <project version="4">
   <component name="VcsDirectoryMappings">
     <mapping directory="$PROJECT_DIR$" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$/ReactHooks.Lessons" vcs="Git" />
   </component>
 </project>
\ No newline at end of file
diff --git a/hooks/src/App.js b/hooks/src/App.js
index 50e4dd5..b918e77 100644
--- a/hooks/src/App.js
+++ b/hooks/src/App.js
@@ -1,13 +1,17 @@
 import React from 'react'
 import './App.css';
 import ClassCounter from "./components/ClassCounter";
-import HookCounter from "./components/HookCounter";
+// import HookCounter from "./components/HookCounter";
+import HookCounterThree from "./components/HookCounterThree";
+import HookCounterFour from "./components/HookCounterFour";
 
 function App() {
   return (
     <div className="App">
       {/*<ClassCounter/>*/}
-      <HookCounter/>
+      {/*<HookCounter/>*/}
+      {/*<HookCounterThree/>*/}
+      <HookCounterFour/>
     </div>
   );
 }
diff --git a/hooks/src/components/HookCounterFour.js b/hooks/src/components/HookCounterFour.js
new file mode 100644
index 0000000..9d3e408
--- /dev/null
+++ b/hooks/src/components/HookCounterFour.js
@@ -0,0 +1,26 @@
+import React, { useState } from   'react'
+
+function HookCounterFour() {
+  const [name,setName]= useState({firstName: '', lastName: ''})
+
+  return (
+   <div>
+     <form>
+      <input
+          type="text"
+          value={name.firstName}
+          onChange={e => setName({...name,firstName: e.target.value})}/>
+      <input type="text"
+          value={name.lastName}
+          onChange={e => setName({...name,lastName: e.target.value})}/>
+      <h2>Your first name is - {name.firstName}</h2>
+      <h2>Your last  name is - {name.lastName}</h2>
+      <h2>{JSON.stringify(name)}</h2>
+
+     </form>
+   </div>
+  )
+
+}
+
+export default HookCounterFour
\ No newline at end of file
diff --git a/hooks/src/components/HookCounterThree.js b/hooks/src/components/HookCounterThree.js
new file mode 100644
index 0000000..214689f
--- /dev/null
+++ b/hooks/src/components/HookCounterThree.js
@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+
+function HookCounterThree() {
+  const initialCount =0
+  const [count, setCount] = useState(initialCount)
+
+  const incrementFive  =() => {
+     for (let i=0; i<5; i++) {
+      setCount(prevCount => prevCount + 1  )
+     }
+  }
+    return(
+     <div>
+      Count: {count}
+         <button onClick={() => setCount(initialCount)}>Reset</button>
+         <button onClick={() => setCount(prevCount => prevCount + 1)}>Increment</button>
+         <button onClick={() => setCount(prevCount => prevCount - 1)}>Decrement</button>
+         <button onClick={incrementFive}>Increment 5</button>
+     </div>
+    )
+}
+
+export default HookCounterThree
\ No newline at end of file