🔧😗 -> Ex. (static) array db integration with frontend

quartz-cli/src/index.tsx

@@ -1,10 +1,10 @@
 import ReactDOM from 'react-dom';
-import List from './state/List';
+import UserSearch from './state/UserSearch'
 
 const App = () => {
   return (
     <div>
-      <List />
+      <UserSearch />
     </div>
   );
 };

quartz-cli/src/state/List.tsx

@@ -2,13 +2,22 @@ import { useState } from 'react';
 
 const List: React.FC = () => {
     const [name, setName] = useState('');
+    const [users, setUsers] = useState<string[]>([]);
+
+    const onClick = () => {
+        setName('');
+        setUsers([...users, name]); // Take current users array and add current name to the end
+
+    }
 
     return (
         <div>
             <h3>List</h3>
-
+            <ul>
+                {users.map(user => <li key={user}>{user}</li>)}
+            </ul>
             <input value={name} onChange={(e) => setName(e.target.value)} />
-            <button>Add item</button>
+            <button onClick={onClick}>Add item</button>
         </div>
     );
 };

quartz-cli/src/state/UserSearch.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+const users = [
+    { name: 'Hello', age: 20 },
+    { name: 'There', age: 20 },
+    { name: 'World', age: 20 },
+];
+
+const UserSearch: React.FC = () => {
+    const [name, setName] = useState('');
+    const [user, setUser] = useState<{ name: string, age: number } | undefined>(); // Two types of values/results from a search
+
+    const onClick = () => {
+        const foundUser = users.find((user) => {
+            return user.name === name; // Connect the result of the search to the `foundUser` variable
+        });
+
+        setUser(foundUser);
+    };
+
+    return <div>
+        User Search
+        <input value={name} onChange={e => setName(e.target.value)} />
+        <button onClick={onClick}>Find User</button>
+        <div>
+            {user && user.name}
+            {user && user.age}
+        </div>
+    </div>;
+}
+
+export default UserSearch;