How do I enable pop-up menus from materialise in React?

Question

I have a React app, I'm trying to add a NavBar there like this

<ul id="dropdown1" className="dropdown-content">
          <li><NavLink to="/create">Create lessons</NavLink></li>*/}
                <li><NavLink to="/lessons">Lessons</NavLink></li>
                <li><NavLink to="/quizes">Quizes</NavLink></li>
                <li><NavLink to="/quizcreator">Create QuizGame</NavLink></li>
                <li></li>
                <li></li>
        </ul>

  <nav>
    <div className="nav-wrapper">
      <a href="#!" className="brand-logo">Logo</a>
      <ul className="right hide-on-med-and-down">
        <li><NavLink to="/home">Home</NavLink></li>
        <li><a className="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i
            className="material-icons right">arrow_drop_down</i></a></li>
        <li><a href="/" onClick={logoutHandler}>Logout</a></li>
      </ul>
    </div>
  </nav>

I would like this thing to open and show the contents either when clicked or hovered over

The materialize css website describes the following code

$(".dropdown-trigger").dropdown();

But I can't figure out where to insert it? Application on the MERN stack

Pheni

Thats the jQuery init - use the javascript init (Materialize doesn't depend on jQuery any more) - and put it inside every component render. – Lucre

Answer 1

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>

Rootlet

Answer 2

According to the official doc you should be able to enable all your dropdowns like the following:

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.dropdown-trigger');
  var instances = M.Dropdown.init(elems);
});

Here is an example (please open in full-page):

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.dropdown-trigger');
  var instances = M.Dropdown.init(elems);
});

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>

Waverly

Answer 3

add a onclick event in your second "li" item, pass the event object, call dropdown() function by fetching the classname from the event object.

<li>
    <a className="dropdown-trigger" href="#!" onclick{(e) => e.target.className.dropdown();} data-target="dropdown1">
       Dropdown<i className="material-icons right">arrow_drop_down</i>
    </a>
</li>

Thibault

Yes but just imagine having to do this for each dropdown of your app :/ This would be a real pain – Waverly

Answer 4

Easy ! just add this code to the js file

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.dropdown-trigger');
  var instances = M.Dropdown.init(elems);
});

You haven't init the dropdown that's why it's not working ! And don't use this framework maybe MDbootstrap will be perfect because they give you a React version and they have a pretty documentation without ads !

Passing

Answer 5

As You said, you are using React, and based on the link that you left on the question, $(".dropdown-trigger").dropdown(); is the jQuery way, you need to find out the React way

You could install materialize-css package, I guess you will find How to use materialize-css with React? helpful for this purpose

then import and use the package like this:

import React, { useRef, useEffect } from 'react';
import M from 'materialize-css';

function DropDown() {
    const dropDownTriggerRef = useRef();
    
    useEffect(() => {
      M.Dropdown.init(dropDownTriggerRef.current);
    }, [])

    return (
           // all of the other tags and other stuff
           ....
           <li>
              <a className="dropdown-trigger"
                 href="#!" data-target="dropdown1"
                 ref={dropDownTriggerRef}
              >
                  Dropdown
                  <i className="material-icons right"> arrow_drop_down </i>
              </a>
           </li>
          ....
    );
}

Fiendish