diff --git a/src/App.tsx b/src/App.tsx
index e0ac47d..184e1c1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,9 +3,13 @@ import ListGroup from "./components/ListGroup";
 function App() {
     let items = ["New York", "San Francisco", "Tokyo", "London"];
 
+    const handleSelectItem = (item: string) => {
+      console.log(item)
+    }
+
   return (
     <div>
-      <ListGroup items={items} heading="Cities"/>
+      <ListGroup items={items} heading="Cities" onSelectItem={handleSelectItem}/>
     </div>
   );
 }
diff --git a/src/components/ListGroup.tsx b/src/components/ListGroup.tsx
index f815104..4ea1adf 100644
--- a/src/components/ListGroup.tsx
+++ b/src/components/ListGroup.tsx
@@ -1,12 +1,12 @@
 import { useState } from "react";
 // {items: [string], heading: string}
 interface Props {
-    items: string [];
-    heading: string;
+  items: string[];
+  heading: string;
+  onSelectItem: (item: string) => void;
 }
 
-function ListGroup({items, heading}: Props) {
-
+function ListGroup({ items, heading, onSelectItem }: Props) {
   const [selectedIndex, setSelectedIndex] = useState(-1);
 
   return (
@@ -22,7 +22,10 @@ function ListGroup({items, heading}: Props) {
                 : "list-group-item"
             }
             key={item}
-            onClick={()=>setSelectedIndex(index)}
+            onClick={() => {
+              setSelectedIndex(index);
+              onSelectItem(item);
+            }}
           >
             {item}
           </li>