Passing data via Props

src/App.tsx

@@ -1,7 +1,13 @@
 import ListGroup from "./components/ListGroup";
 
 function App() {
-  return <div><ListGroup/></div>;
+    let items = ["New York", "San Francisco", "Tokyo", "London"];
+
+  return (
+    <div>
+      <ListGroup items={items} heading="Cities"/>
+    </div>
+  );
 }
 
 export default App;

src/components/ListGroup.tsx

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