diff --git a/lesson26-react-state/public/index.html b/lesson26-react-state/public/index.html
index 5fb8b43..904e6a4 100644
--- a/lesson26-react-state/public/index.html
+++ b/lesson26-react-state/public/index.html
@@ -3,7 +3,7 @@
         <script src="bundle.js" type="module"></script>
     </head>
     <body>
-        <h1>Demo JS and React and DOM</h1>
+        <h3>Demo React and STATE</h3>
         <div id="container"></div>
     </body>
 </html>
\ No newline at end of file
diff --git a/lesson26-react-state/src/demo04-state-counter-WRONG.tsx b/lesson26-react-state/src/demo04-state-counter-WRONG.tsx
new file mode 100644
index 0000000..7aaf8d0
--- /dev/null
+++ b/lesson26-react-state/src/demo04-state-counter-WRONG.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react'
+import * as ReactDom from 'react-dom/client'
+
+/*
+ * DON'T DO THIS:
+ * - Don't use MUTABLE state!!!!!
+ * - Don't capture MUTABLE state from a Component Funcion with CLOSURE
+ */
+let count = 0
+
+function Counter() {
+    function incrementHandler() {
+        count++
+        myRender() // !!!!! DON'T DO THIS !!!! DO NOT CALL RENDER - NEVER
+    }
+    function decrementHandler() {
+        count-- 
+        myRender() // !!!!! DON'T DO THIS !!!! DO NOT CALL RENDER - NEVER
+    }
+    return (
+        <div>
+            <button onClick={decrementHandler}>-</button>
+            <b>{count}</b>
+            <button onClick={incrementHandler}>+</button>
+        </div>
+    )
+}
+
+const root = ReactDom.createRoot(document.getElementById('container'))
+
+function myRender() {
+    root.render(
+        <div>
+            <Counter />
+            <Counter />
+        </div>
+    )
+}
+
+export function demo04() {
+  myRender()  
+}
\ No newline at end of file
diff --git a/lesson26-react-state/src/demo05-state-counter-hooks.tsx b/lesson26-react-state/src/demo05-state-counter-hooks.tsx
new file mode 100644
index 0000000..702fc48
--- /dev/null
+++ b/lesson26-react-state/src/demo05-state-counter-hooks.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react'
+import * as ReactDom from 'react-dom/client'
+
+function Counter() {
+    const [count, setCount] = React.useState(0)
+    const [label, setLabel] = React.useState("even")
+    function incrementHandler() {
+        setCount(count + 1)
+    }
+    function decrementHandler() {
+        setCount(count - 1)
+    }
+    return (
+        <div>
+            <button onClick={decrementHandler}>-</button>
+            <b>{count}</b>
+            <button onClick={incrementHandler}>+</button>
+            {/* Show the value of State label with the even or odd according to the count */}
+        </div>
+    )
+}
+
+const root = ReactDom.createRoot(document.getElementById('container'))
+
+function myRender() {
+    root.render(
+        <div>
+            <Counter />
+            <Counter />
+            <Counter />
+        </div>
+    )
+}
+
+export function demo05() {
+  myRender()  
+}
\ No newline at end of file
diff --git a/lesson26-react-state/src/index.ts b/lesson26-react-state/src/index.ts
index 4982f36..24150a7 100644
--- a/lesson26-react-state/src/index.ts
+++ b/lesson26-react-state/src/index.ts
@@ -1,5 +1,7 @@
 // import { demo01 } from "./demo01-intro-react"
 // import { demo02 } from "./demo02-reconciliation"
-import { demo03 } from "./demo03-components"
+// import { demo03 } from "./demo03-components"
+import { demo04 } from "./demo04-state-counter-WRONG";
+import {demo05} from "./demo05-state-counter-hooks"
 
-demo03()
\ No newline at end of file
+demo05()
\ No newline at end of file
