Adding a dropdown feature in a React.js component

Question

Adding a dropdown feature in a React.js component

I am working on a React project that requires me to create a dropdown menu using only pure React. The dropdown should also be responsive for different devices.

The expected interactions are as follows:

For larger devices like desktop screens: On hover
For smaller devices like mobile phones: On click

Working Example

function App() {

  React.useEffect(() => {

    const has_submenu = document.querySelector(".has-submenu");
    const submenu = document.querySelector(".submenu");
    const submenu_height = submenu && submenu.childElementCount * 34;

    if (has_submenu && submenu && submenu_height) {
      has_submenu.addEventListener("mouseover", function () {
        submenu.style.height = submenu_height + "px";
      });

      has_submenu.addEventListener("mouseout", function () {
        submenu.style.height = "0px";
      });

      submenu.addEventListener("mouseover", function () {
        submenu.style.height = submenu_height + "px";
      });

      submenu.addEventListener("mouseout", function () {
        submenu.style.height = "0px";
      });

    }

  }, []);

  return (
    <nav>
      <ul>
        <li className="menu-item  has-submenu inline-flex"> Account </li>
           <ul className="submenu">
              <li className="submenu-item submenu1">
                Profile
               </li>
              <li className="submenu-item submenu1">
                Change Password
               </li>
           </ul>
       </ul>
    </nav>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

.submenu {
  background: #fff;
  position: absolute;
  list-style-type: none;
  padding: 0;
  height: 0px;
  overflow: hidden;
  color: #000;
  cursor: pointer;
  transition: height 0.33333s ease-in;
}
.submenu-item {
  padding: 2px 16px;
  list-style-position: outside;
  transition: background 0.33333s;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e1c0b0f0d1a2e5f584059405e430f021e060f405e">[email protected]</a>/umd/react.development.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6a4b3b7b5a2fbb2b9bb96e7e0f8e1f8e6fbb7baa6beb7f8e6">[email protected]</a>/umd/react-dom.development.js"></script>

<div id="app"></div>

In the code snippet above, you can see that the submenus are displayed when hovering over the 'Account' text.

Requirement:

Although this approach works, I believe it's relying too much on direct DOM manipulation and not utilizing React efficiently. Is there a pure React way to achieve the same functionality?

If so, I would appreciate any guidance on refactoring the code to implement the dropdown menus for both desktop (hover) and mobile (click) views.

Expected Output:

Desktop: (On hover)

 Dashboard      Account               Logout
                | -- Profile -- |
                | -- Change Password -- |

Mobile: (On click)

  Dashboard

  Account 

    | -- Profile -- |
    | -- Change Password -- |

 Logout

javascript html css reactjs drop-down-menu

Answer 1

Answer №1

React grants you the power to manage state within your components. There are numerous approaches to handle this, but I'll provide a brief example below.

You should respond to events and modify the state. Whenever the state changes, your component will undergo re-rendering.

const MAGIC_NUMBER = 34;

const MyApp = () => {

  const subMenuRef = React.createRef();
  const [ isMenuOpen, setMenuOpen ] = React.useState(false);
  const [ menuHeight, setMenuHeight ] = React.useState(0);

  const openMenu = () => setMenuOpen(true);
  const closeMenu = () => setMenuOpen(false);

  React.useEffect(() => {
    if (!subMenuRef.current) { return; }
    setMenuHeight(subMenuRef.current.childElementCount * MAGIC_NUMBER);
  }, [subMenuRef.current]);

  return (
    <nav>
      <ul>
        <li
          className="menu-item inline-flex" 
          onMouseOver={openMenu}
          onMouseOut={closeMenu}
        >
         Account
        </li>
        <ul
          className="submenu"
          ref={subMenuRef}
          style={{height: isMenuOpen ? menuHeight : 0}}
          onMouseOver={openMenu}
          onMouseOut={closeMenu}
        >
          <li className="submenu-item submenu1">
           Profile
          </li>
          <li className="submenu-item submenu1">
           Change Password
          </li>
        </ul>
      </ul>
    </nav>
  );
};

ReactDOM.render(<MyApp />, document.querySelector('#app'));

.submenu {
  background: #fff;
  position: absolute;
  list-style-type: none;
  padding: 0;
  height: 0px;
  overflow: hidden;
  color: #000;
  cursor: pointer;
  transition: height 0.33333s ease-in;
  border: 1px solid #777;
}
.submenu-item {
  padding: 2px 16px;
  list-style-position: outside;
  transition: background 0.33333s;
}

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

There's quite a bit happening above, so let me simplify it here...

We directly added event listeners to our elements.
- With React, we can easily attach these event listeners without needing to access the DOM.
We introduced some state to track the open/close state of the menu.
- In our event handlers, we simply toggle the state for things to function correctly.
- We incorporate conditional logic in our elements to manage the state change (altering the height when the menu opens/closes).
We utilized a ref to directly access the DOM in order to obtain the child element count. Documentation
- If you're fully in React, these children are likely part of a list that you're iterating over, hence you could easily get the length from there.
- In general, tapping into the underlying DOM isn't necessary as most actions will be handled internally by React itself.

PS: Try to avoid using magic numbers whenever feasible. In this scenario, you have a value of 34. What does this signify? Why is it included? If precise heights are necessitated, rely on css computations using rem or lineHeight

Answer 2

React grants you the power to manage state within your components. There are numerous approaches to handle this, but I'll provide a brief example below.

You should respond to events and modify the state. Whenever the state changes, your component will undergo re-rendering.

const MAGIC_NUMBER = 34;

const MyApp = () => {

  const subMenuRef = React.createRef();
  const [ isMenuOpen, setMenuOpen ] = React.useState(false);
  const [ menuHeight, setMenuHeight ] = React.useState(0);

  const openMenu = () => setMenuOpen(true);
  const closeMenu = () => setMenuOpen(false);

  React.useEffect(() => {
    if (!subMenuRef.current) { return; }
    setMenuHeight(subMenuRef.current.childElementCount * MAGIC_NUMBER);
  }, [subMenuRef.current]);

  return (
    <nav>
      <ul>
        <li
          className="menu-item inline-flex" 
          onMouseOver={openMenu}
          onMouseOut={closeMenu}
        >
         Account
        </li>
        <ul
          className="submenu"
          ref={subMenuRef}
          style={{height: isMenuOpen ? menuHeight : 0}}
          onMouseOver={openMenu}
          onMouseOut={closeMenu}
        >
          <li className="submenu-item submenu1">
           Profile
          </li>
          <li className="submenu-item submenu1">
           Change Password
          </li>
        </ul>
      </ul>
    </nav>
  );
};

ReactDOM.render(<MyApp />, document.querySelector('#app'));

.submenu {
  background: #fff;
  position: absolute;
  list-style-type: none;
  padding: 0;
  height: 0px;
  overflow: hidden;
  color: #000;
  cursor: pointer;
  transition: height 0.33333s ease-in;
  border: 1px solid #777;
}
.submenu-item {
  padding: 2px 16px;
  list-style-position: outside;
  transition: background 0.33333s;
}

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

There's quite a bit happening above, so let me simplify it here...

We directly added event listeners to our elements.
- With React, we can easily attach these event listeners without needing to access the DOM.
We introduced some state to track the open/close state of the menu.
- In our event handlers, we simply toggle the state for things to function correctly.
- We incorporate conditional logic in our elements to manage the state change (altering the height when the menu opens/closes).
We utilized a ref to directly access the DOM in order to obtain the child element count. Documentation
- If you're fully in React, these children are likely part of a list that you're iterating over, hence you could easily get the length from there.
- In general, tapping into the underlying DOM isn't necessary as most actions will be handled internally by React itself.

PS: Try to avoid using magic numbers whenever feasible. In this scenario, you have a value of 34. What does this signify? Why is it included? If precise heights are necessitated, rely on css computations using rem or lineHeight

Adding a dropdown feature in a React.js component

Answer №1

Similar questions

The value entered in the HTML input is not being recognized by PHP

Tips for invoking a Laravel Model function with a parameter in a Vue.js template

Centering divs using iPad media queries does not seem to work properly

Converting an HTML form with empty values into JSON using JavaScript and formatting it

What is the best way to define the width of a value in percentage using JavaScript's

How to apply background images to LI elements using CSS

What is the best way to incorporate right side padding into a horizontal scroll?

Issues with utilizing jQuery AJAX for form submissions

Sending data from Javascript to PHP using Ajax in Wordpress

"Exploring three.js: Transforming a plane's orthogonal vector into a rotation matrix for the plane

`Can you guide me on transferring an audio blob from javascript to python?`

Similar to Laravel's service providers or WordPress style plugins, Node.js has its own unique way of managing and extending functionality

Display JSON values on PHP event calendar unless they are sold out

Start running additional JavaScript code only after the previous one has been fully executed

What is the most effective method for displaying two external web pages next to each other?

Retrieve the $$state value from the Service Function

Trouble with parseJSON when handling form POST in Python

The React parent component experiences a delay of one step when updating checkbox states

Identifying content loading in ajax div

What steps should I take to ensure that this accordion is responsive?