Managing state

src/components/ListGroup.tsx

@@ -1,14 +1,29 @@
+import { useState } from "react";
+
 function ListGroup() {
-    let items = ['New York', 'San Francisco', 'Tokyo', 'London'];
+  let items = ["New York", "San Francisco", "Tokyo", "London"];
-    items = [];
+
+  const [selectedIndex, setSelectedIndex] = useState(-1);
 
-    return (
+  return (
-        <>
+    <>
-    <h1>List Name</h1>
+      <h1>List Name</h1>
-    {items.length === 0 && <p>No items found</p>}
+      {items.length === 0 && <p>No items found</p>}
-    <ul className="list-group">
+      <ul className="list-group">
-        {items.map(item => <li className="list-group-item" key={item}>{item}</li>)}
+        {items.map((item, index) => (
-    </ul>
+          <li
+            className={
+              selectedIndex === index
+                ? "list-group-item active"
+                : "list-group-item"
+            }
+            key={item}
+            onClick={()=>setSelectedIndex(index)}
+          >
+            {item}
+          </li>
+        ))}
+      </ul>
     </>
   );
 }