0

I'm trying to put a dropdown menu in my navbar. I'm using the materialize framework, and so far this is the only materialize javascript element I can't get to work. Here's the code I am using for the navbar:

import React, { Component } from "react";
import M, { Dropdown } from "materialize-css";

class Navbar extends Component {

  componentDidMount() {
    M.Dropdown.init(this.Dropdown);
  }

  render() {
    return (
      <div className="navbar-fixed">
        <nav>
          <div class="nav-wrapper purple">
            <a href="/" class="brand-logo">
              Logo
            </a>
            <a class="dropdown-trigger btn right" data-target="dropdown1">
              Drop Me!
            </a>

            <ul
              id="dropdown1"
              class="dropdown-content"
              ref={Dropdown => {
                this.Dropdown = Dropdown;
              }}
            >
              <li>
                <a href="#!">one</a>
              </li>
              <li>
                <a href="#!">two</a>
              </li>
              <li class="divider" tabindex="-1" />
              <li>
                <a href="#!">three</a>
              </li>
              <li>
                <a href="#!">
                  <i class="material-icons">view_module</i>four
                </a>
              </li>
              <li>
                <a href="#!">
                  <i class="material-icons">cloud</i>five
                </a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}

export default Navbar;

Essentially I click the element and nothing happens. Not sure what I'm doing wrong, and I can't find anything similar on Stack overflow. Here's the code sandbox... https://codesandbox.io/s/dawn-snow-3cmdv

Thanks!

Djaenike
  • 1,645
  • 5
  • 21
  • 32
  • Can you move the init after the render? – Sean Doherty May 04 '20 at 13:17
  • I tried moving the ```M.Dropdown.init(this.Dropdown);``` after the render(), and before the return, and also moving it after the render all together. Unfortunately no luck. – Djaenike May 04 '20 at 13:22
  • Have you managed to initialize any other components that need initializing? – Sean Doherty May 04 '20 at 13:25
  • Realized I should have initialized in componentDidMount(). I have updated the sandbox, and did get a popup modal to work. The dropdown is now giving me this error: ```Cannot set property 'tabIndex' of null``` – Djaenike May 04 '20 at 14:04
  • Take a look here: https://stackoverflow.com/questions/54343172/materialize-cannot-set-property-tabindex-of-null-at-dropdown-makedropdownfoc – Sean Doherty May 04 '20 at 14:14
  • I did, but I'm not sure how to apply the ```$('#dropdowner').dropdown();``` to my project - so it's hard to test out that solution. Thank you for the source though, I'll play around with it. If you know of where to put that in my project let me know... https://codesandbox.io/s/dawn-snow-3cmdv – Djaenike May 04 '20 at 15:00
  • $('#dropdowner').dropdown(); is equal to M.Dropdown.init(this.Dropdown), it is the jQuery initialisation. https://materializecss.com/dropdown.html#initialization – Sean Doherty May 04 '20 at 15:03

0 Answers0