Passing functions via Props

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>
   );
 }

src/components/ListGroup.tsx

@@ -3,10 +3,10 @@ import { useState } from "react";
 interface Props {
   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>