How to solve the problem of button overlay display on restaurant website

Question

I'm having trouble building a button on my restaurant website using React.js and it's not displaying the overlay page correctly. They are set in their own component (MenuButtons.jsx) and located at the bottom of the shorter menu section of the previous page (see image below). I wish they would launch separate overlay pages for the rest of the menu (e.g. wine list, lunch menu, etc.) since the full menu is too long to fit all on the front page. The image below shows what a wine list overlay page would look like.

The following is the code:

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;

Menu section on the front page of the restaurant website

Restaurant website wine list overlay page

I tried reusing some code from the navigation bar section (which launches a single overlay page from the hamburger menu at the top of the previous page) to import the wine list as a component (see first screenshot below). This works for the first button (wine), but when I try to copy the code to the second button (spirits and liqueurs), both the wine and spirits/liqueurs button overlays show spirits and liqueurs The content of the component.

Menu Button Code-Error

Someone suggested that I rewrite the MenuButtons.jsx code as follows (see the second screenshot below): 1: Declare the state at the top of the component (line 5): const [overlay, setOverlay] = useState(null); 2: Create a component that receives the string "wines" as an attribute and renders the WinesOverlay component based on the string set in the state (lines 6-14). 3: Set "label" to the onClick handler of "wines" (line 21).

Not sure if I wrote the code in MenuButtons.jsx correctly, or in the correct order. But the wine button doesn't work, so I don't know if the rewritten code is closer to the desired effect.

If I can get the first button to work, the others should be relatively simple. Any advice is greatly appreciated.

Menu Button Code-Current

Answer 1

When using onClick, it seems that you are not passing the 'value' to the renderOverlay, and you are declaring the onClick of the Wines button incorrectly. You used an inline arrow function which just updated your overlay value to "wines" and didn't call renderOverlay anywhere. {(rendeOverlay) => ... Here the function is passed as a parameter instead of calling it. Please correct it like this.

<button
   onClick={() => {
      renderOverlay("wines");
   }} />

If you have any questions, please let me know.