Managing state

src/components/ListGroup.tsx

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