Comment résoudre le problème de l'affichage des boutons en superposition sur le site Web du restaurant

Question

J'ai du mal à créer un bouton sur le site Web de mon restaurant à l'aide de React.js et la page de superposition ne s'affiche pas correctement. Ils sont définis dans leur propre composant (MenuButtons.jsx) et situés au bas de la section de menu la plus courte de la page précédente (voir l'image ci-dessous). J'aimerais qu'ils lancent des pages superposées distinctes pour le reste du menu (par exemple, la carte des vins, le menu du déjeuner, etc.), car le menu complet est trop long pour tenir sur la première page. L'image ci-dessous montre à quoi ressemblerait une page de superposition de carte des vins.

Voici le 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;

Section menu en première page du site du restaurant

Page de superposition de la carte des vins du site Web du restaurant

J'ai essayé de réutiliser du code de la section de la barre de navigation (qui lance une seule page en superposition depuis le menu hamburger en haut de la page précédente) pour importer la carte des vins en tant que composant (voir première capture d'écran ci-dessous). Cela fonctionne pour le premier bouton (vin), mais lorsque j'essaie de copier le code sur le deuxième bouton (spiritueux et liqueurs), les superpositions des boutons vin et spiritueux/liqueurs affichent le contenu du composant spiritueux et liqueurs.

Code du bouton de menu - Erreur

Quelqu'un m'a suggéré de réécrire le code MenuButtons.jsx comme suit (voir la deuxième capture d'écran ci-dessous) : 1 : Déclarez l'état en haut du composant (ligne 5) : const [overlay, setOverlay] = useState(null); 2 : Créez un composant qui reçoit la chaîne « wines » comme attribut et restitue le composant WinesOverlay en fonction de la chaîne définie dans l'état (lignes 6 à 14). 3 : Définissez "label" sur le gestionnaire onClick de "wines" (ligne 21).

Je ne sais pas si j'ai écrit le code dans MenuButtons.jsx correctement ou dans le bon ordre. Mais le bouton vin ne fonctionne pas, donc je ne sais pas si le code réécrit est plus proche de l'effet recherché.

Si je parviens à faire fonctionner le premier bouton, le reste devrait être relativement simple. Tout conseil est grandement appréciée.

Code du bouton de menu - Actuel

Answer 1

Lorsque vous utilisez onClick, il semble que vous ne transmettez pas la « valeur » au renderOverlay et que vous déclarez incorrectement le onClick du bouton Wines. Vous avez utilisé une fonction de flèche en ligne qui vient de mettre à jour votre valeur de superposition en "wines" et n'avez appelé renderOverlay nulle part. {(rendeOverlay) => ... Ici, la fonction est passée en paramètre au lieu de l'appeler. Veuillez le corriger comme ceci.

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

Si vous avez des questions, n'hésitez pas à me le faire savoir.