Turned OpenPage and DropdownMenu to Lambda functions.

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-native": "^0.72.6",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

src/Header/DropdownMenu.js

@@ -1,11 +1,12 @@
 import OpenPage from "./OpenPage";
 
-export default function DropdownMenu() {
-
+const DropdownMenu = () => {
   return (
     <div>
-      <button type = "button" onClick = {OpenPage('/JoinTheClub')}>Join the Club</button>
-      <button type = "button" onClick = {OpenPage('/UpcomingEvents')}>Upcoming Events</button>
+      <button type = "button" onClick = {() => OpenPage('/JoinTheClub')}>Join the Club</button>
+      <button type = "button" onClick = {() => OpenPage('/UpcomingEvents')}>Upcoming Events</button>
     </div>
   );
-};
+};
+
+export default DropdownMenu;

src/Header/Header.js

@@ -24,18 +24,19 @@ export default function Header() {
                     <p>Schulich Offroad</p>
                 </div>
                 <div>
-                    <button type = "button" onClick = {OpenPage('/')}>About Us</button>
-                    <button type = "button" onClick = {OpenPage('/Teams')}>Teams</button>
-                    <button type = "button" onClick = {OpenPage('/OurSponsors')}>Our Sponsors</button>
-                    <button type = "button" onClick = {OpenPage('/BecomeASponsor')}>Become a Sponsor</button>
+                    <button type = "button" onClick = {() => OpenPage('/')}>About Us</button>
+                    <button type = "button" onClick = {() => OpenPage('/Teams')}>Teams</button>
+                    <button type = "button" onClick = {() => OpenPage('/OurSponsors')}>Our Sponsors</button>
+                    <button type = "button" onClick = {() => OpenPage('/BecomeASponsor')}>Become a Sponsor</button>
                     <div
                     onMouseEnter={handleMouseEnter}
                     onMouseLeave={handleMouseLeave}
+                    style={{background: "red"}}
                     >
-                        <button>Club Membership & Upcoming Events</button>
+                        <button type = "button">Club Membership & Upcoming Events</button>
                         {isDropdownVisible && <DropdownMenu />}
                     </div>
-                    <button type = "button" onClick = {OpenPage('/Gallery')}>Gallery</button>
+                    <button type = "button" onClick = {() => OpenPage('/Gallery')}>Gallery</button>
                 </div>
             </header>
             <Outlet />

src/Header/OpenPage.js

@@ -1,8 +1,10 @@
 import { useNavigate } from "react-router-dom";
 
-export default function OpenPage(arg) {
-    console.log(arg);
+const OpenPage = (arg) => {    
     const navigate = useNavigate();
-
     navigate(arg);
-};
+    console.log(arg);
+
+};
+
+export default OpenPage;