chore: Display todo list state data from an inner component

Author: weaponsforge

client/src/components/usestate/index.js

@@ -1,7 +1,9 @@
 import { useState } from 'react'
 import Card from '@/common/ui/card'
 import Page from '@/common/layout/page'
+
 import TodoListComponentV3 from '@/domain/usestate/todolist'
+import TodoListComponentFull from '@/domain/usestate/todolistfull'
 
 function UseStateComponent () {
   const [state, setState] = useState([])
@@ -35,6 +37,10 @@ function UseStateComponent () {
       </button>
       <br /><br />
 
+      <h3>ToDo list state passed from props</h3>
+      <br />
+
+      {/** Renders a list of ToDo items passed from props */}
       <Card>
         <Card>
           <Card>
@@ -52,6 +58,26 @@ function UseStateComponent () {
           </Card>
         </Card>
       </Card>
+
+      <br /><br />
+
+      <h3>ToDo list state isolated on an inner component</h3>
+      <br />
+
+      {/** Renders a list of ToDo items with all local state inside the TodoListComponentFull component */}
+      <Card>
+        <Card>
+          <Card>
+            <Card>
+              <Card>
+                <Card>
+                  <TodoListComponentFull />
+                </Card>
+              </Card>
+            </Card>
+          </Card>
+        </Card>
+      </Card>
     </Page>
   )
 }

client/src/domain/usestate/todolist/index.js

@@ -21,6 +21,7 @@ function TodoListComponentV3 ({
 }
 
 TodoListComponentV3.propTypes = {
+  todos: PropTypes.array,
   deleteTodo: PropTypes.func
 }
 

client/src/domain/usestate/todolistfull/index.js

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+
+function TodoListComponentFull () {
+  const [todos, setState] = useState([])
+
+  const addTodo = () => {
+    const data = [...todos]
+    data.push({
+      id: Math.random().toString(36).substring(2, 8),
+      text: 'Hi, wooorld!!'
+    })
+
+    setState(data)
+  }
+
+  const deleteTodo = (id) => {
+    const temp = todos.filter(item => item.id !== id)
+    setState(temp)
+  }
+
+  return (
+    <>
+      <button onClick={addTodo}>
+        Create Todo
+      </button>
+      <br /><br />
+
+      <ul style={{ marginTop: '24px' }}>
+        {(todos).map(((item, index) => (
+          <li key={index}>
+            <span>id: {item.id}, {item.text}</span>
+            <span>
+              <button onClick={() => deleteTodo(item.id)}>
+                [ x ]
+              </button>
+            </span>
+          </li>
+        )))}
+      </ul>
+    </>
+  )
+}
+
+export default TodoListComponentFull