spread.operator_learned

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>
   );
 }

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

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