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

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">
Logo
<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

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>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</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>

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>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</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>

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>

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 !

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>
....
);
}