Managing state

src/components/ListGroup.tsx

@@ -1,6 +1,9 @@
+import { useState } from "react";
+
 function ListGroup() {
   let items = ["New York", "San Francisco", "Tokyo", "London"];
-  //items = [];
+
+  const [selectedIndex, setSelectedIndex] = useState(-1);
 
   return (
     <>
@@ -9,9 +12,13 @@ function ListGroup() {
       <ul className="list-group">
         {items.map((item, index) => (
           <li
-            className="list-group-item"
+            className={
+              selectedIndex === index
+                ? "list-group-item active"
+                : "list-group-item"
+            }
             key={item}
-            onClick={() => console.log(item, index)}
+            onClick={()=>setSelectedIndex(index)}
           >
             {item}
           </li>