Passing Custom Arguments to Event Functions

Author: ThomasCode92

src/App.jsx

@@ -5,8 +5,8 @@ import TabButton from './components/TabButton';
 import { CORE_CONCEPTS } from './data/core-concepts';
 
 function App() {
-  function handleSelect() {
-    console.log('Tab selected');
+  function handleSelect(selectedTab) {
+    console.log(selectedTab);
   }
 
   return (
@@ -29,10 +29,12 @@ function App() {
         <section id="examples">
           <h2>Examples</h2>
           <menu>
-            <TabButton onSelect={handleSelect}>Components</TabButton>
-            <TabButton onSelect={handleSelect}>Props</TabButton>
-            <TabButton onSelect={handleSelect}>State</TabButton>
-            <TabButton onSelect={handleSelect}>JSX</TabButton>
+            <TabButton onSelect={() => handleSelect('components')}>
+              Components
+            </TabButton>
+            <TabButton onSelect={() => handleSelect('jsx')}>JSX</TabButton>
+            <TabButton onSelect={() => handleSelect('props')}>Props</TabButton>
+            <TabButton onSelect={() => handleSelect('state')}>State</TabButton>
           </menu>
           Dynamic Content
         </section>