14 - React useState

codingforentrepreneurs · codingforentrepreneurs · commit 63ce3dbfe98b · 2020-09-14T11:49:00.000-07:00
diff --git a/index.html b/index.html
@@ -6,6 +6,13 @@
     <body>
         <h1>Hello world</h1>
         <div id='app'></div>
+        <button id='myBtn'>hello btn</button>
+        <script>
+            var btn = document.getElementById("myBtn")
+            btn.addEventListener('click', (event)=>{
+                alert("Button clicked.")
+            })
+            </script>
         <script src='index.js'></script>
     </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,9 +1,19 @@
-import React from 'react'
+import React, {useState} from 'react'
 import ReactDOM from 'react-dom'
 
 
+const Btn = () =>{
+    const [clickCount, setClickCount] = useState(0)
+
+    const handleClick = (event) =>{
+        // alert("btn in react")
+        setClickCount(clickCount + 1)
+    }
+    return <button onClick={handleClick} className={`class-${clickCount}`}>hello react btn</button>
+}
+
 const App = () => {
-    return <div>Hello world again.</div>
+    return <div>Hello world again.<Btn /></div>
 }
 
 const htmlElement = document.getElementById("app")
