Move list code into ListGroup. Add parameters to ListGroup

react-again-tutorial/src/App.tsx

@@ -6,36 +6,9 @@ import { MouseEvent } from "react";
 // Following tutorial https://www.youtube.com/watch?v=SqcY0GlETPk
 
 function App() {
-  const items = ["Dude", "Man", "Shit"];
+  const items = ["Dude", "Man", "Shit", "Is it working?"];
 
-  const [activeListItem, setActiveListItem] = useState(-1);
-
-  const myClickHandlerMan = (event: MouseEvent) => {
-    console.log(event);
-
-    setActiveListItem(2);
-  };
-
-  return (
-    <>
-      <h1>The list</h1>
-      <ul className="list-group">
-        {items.map((item, index) => (
-          <li
-            className={
-              activeListItem === index
-                ? "list-group-item active"
-                : "list-group-item"
-            }
-            key={item}
-            onClick={() => setActiveListItem(index)}
-          >
-            {item}
-          </li>
-        ))}
-      </ul>
-    </>
-  );
+  return <ListGroup items={items} heading="Man shit list" />;
 }
 
 export default App;

react-again-tutorial/src/components/ListGroup.tsx

@@ -1,5 +1,40 @@
-function ListGroup() {
-    return <h1>List Group</h1>
+import { useState } from "react";
+
+interface ListGroupProps {
+  items: string[];
+  heading: string;
+}
+
+function ListGroup({ items, heading }: ListGroupProps) {
+  const [activeListItem, setActiveListItem] = useState(-1);
+
+  // Retired click handler
+  const myClickHandlerMan = (event: MouseEvent) => {
+    console.log(event);
+
+    setActiveListItem(2);
+  };
+
+  return (
+    <>
+      <h1>{heading}</h1>
+      <ul className="list-group">
+        {items.map((item, index) => (
+          <li
+            className={
+              activeListItem === index
+                ? "list-group-item active"
+                : "list-group-item"
+            }
+            key={item}
+            onClick={() => setActiveListItem(index)}
+          >
+            {item}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
 }
 
-export default ListGroup;
+export default ListGroup;