I'm currently facing an issue with the functionality of the buttons on my React.js-powered restaurant website. These buttons are located within a component called MenuButtons.jsx and are situated at the bottom of a shorter menu section on the homepage (refer to the image below for context). My goal is to have these buttons trigger separate overlay pages for different sections of the menu such as the wine list or lunch menu since displaying the entire menu on the front page isn't feasible due to its length. The second image provided illustrates how the wine list overlay should appear.
Below is the code snippet in question:
import React, { useState } from "react";
import WinesOverlay from
"../../components/WinesOverlay/WinesOverlay";
const MenuButtons = () => {
const [overlay, setOverlay] = useState(null);
const renderOverlay = (value) => {
if (!value) {
return;
} else if (value === "wines") {
return (
<div className="app__specialMenu-smallscreen">
<WinesOverlay />
</div>
);
}
};
return (
<div className="app__specialMenu-buttons">
<button
onClick={(renderOverlay) => setOverlay("wines")}
type="button"
className="custom__button"
>
WINES
</button>
<button type="button" className="custom__button">
SPIRITS & LIQUEURS
</button>
<button type="button" className="custom__button">
LUNCH MENU
</button>
<button type="button" className="custom__button">
DINNER MENU
</button>
<button type="button" className="custom__button">
SOFT DRINKS
</button>
<button type="button" className="custom__button">
BEVERAGES
</button>
</div>
);
};
export default MenuButtons;
Front Page Menu Section of Restaurant Site
Wine List Overlay Page on Restaurant Site
I made an attempt to reuse code from the navigation bar section, which successfully launches a single overlay page when accessing a hamburger menu at the top of the front page, to incorporate the wine list as a component (as seen in the first screenshot below). While this worked for the wines button, trying to use similar code for the spirits & liqueurs button caused both buttons to display content from the spirits & liqueurs component unexpectedly.
Incorrect Code for Menu Buttons
I received advice to restructure the MenuButtons.jsx code as follows (detailed in the second screenshot below): 1: Declare the state at the beginning of the component (line 5): const [overlay, setOverlay] = useState(null); 2: Develop a component that accepts the string "wines" as a prop depending on the string set in state, rendering the WinesOverlay component (lines 6-14). 3: Include the label "wines" in the onClick handler (line 21).
I'm uncertain whether I've correctly written the code in MenuButtons.jsx or in the appropriate order. The wines button doesn't seem to function as expected, leaving me unsure if the rewritten code brings me closer to the desired outcome.
If I manage to get the first button operational, addressing the subsequent buttons should be relatively straightforward. I would greatly appreciate any guidance offered.