How to make a dropdown menu disappear once you open it and click on a specific category in React-CodePudding

I'm having a problem with a dropdown menu which remains on the screen after i click on it and choose a specific category, which is being displayed in a box after i click on it. So everything works fine except the dropdown is not disappering, and i would like it to disapper once i click on the category.

I tried to create a function (const handleMenuOne) where I could both remove the dropdown menu and display the category text in the box at the same time but it doesn't work. Any idea how I can make this dropdown disappear and display the category in the box at the same time?

import React, { useState } from "react";
import "../styles/Dropdown.css";

const Dropdown = () => {
  const [open, setOpen] = useState("");

  const handleOpen = () => {
    setOpen(!open);
  };

  const handleMenuOne = () => {
    setOpen("Dame Klip", false);
  };

  const handleMenuTwo = () => {
    setOpen(false);
  };

  const handleMenuthree = () => {
    setOpen(false);
  };

  const handleMenufour = () => {
    setOpen(false);
  };

  const handleMenufive = () => {
    setOpen(false);
  };

  return (
    <section className="dropdown_container">
      <div className="Search">
        Vælg Service
        <button className="Search_Input" onClick={handleOpen}>
          {open}
        </button>
        {open ? (
          <ul className="menu">
            <li className="menu-item">
              <button onClick={handleMenuOne}>Dame Klip</button>
            </li>
            <li className="menu-item">
              <button onClick={handleMenuTwo}>Herre Klip</button>
            </li>
            <li className="menu-item">
              <button onClick={handleMenuthree}>Farvning</button>
            </li>
            <li className="menu-item">
              <button onClick={handleMenufour}>Permanent</button>
            </li>
            <li className="menu-item">
              <button onClick={handleMenufive}>Hår opsætning</button>
            </li>
          </ul>
        ) : null}
        {open ? <div>Is Open</div> : <div></div>}
      </div>
    </section>
  );
};

export default Dropdown;

CodePudding user response：

Here's the solution. You can use 2 state variables. And I have removed a bunch of functions from your code.

import React, { useState } from "react";
import "./styles.css";

const App = () => {
  const [open, setOpen] = useState(false);
  const [selectedMenu, setSelectedMenu] = useState("");

  const handleOpen = () => {
    setOpen(!open);
  };

  const handleMenu = (e) => {
    e.stopPropagation();
    setSelectedMenu(e.target.textContent);
    setOpen(false);
  };

  return (
    <section className="dropdown_container">
      <div className="Search">
        Vælg Service
        <button className="Search_Input" onClick={handleOpen}>
          {selectedMenu}
        </button>
        {open ? (
          <ul className="menu" onClick={handleMenu}>
            <li className="menu-item">Dame Klip</li>
            <li className="menu-item">Herre Klip</li>
            <li className="menu-item">Farvning</li>
            <li className="menu-item">Permanent</li>
            <li className="menu-item">Hår opsætning</li>
          </ul>
        ) : null}
      </div>
    </section>
  );
};

export default App;

You can check the live demo here: https://codesandbox.io/s/wizardly-sky-n2o5u0?file=/src/App.js:0-984