title: How i can use DropDown from Materialize css in React
body: <p>How can I use DropDown from Materialize css in React component?
  When I click on the button, there is no dropdown content 
  My code below:</p>
  
  <pre><code>import React , {Component} from 'react';
  import 'materialize-css';
  
  export default class extends Component{
        openDropDown(){
            $('.dropdown-button').dropdown({
                    inDuration: 300,
                    outDuration: 225,
                    constrainWidth: false, // Does not change width of dropdown to that of the activator
                    hover: true, // Activate on hover
                    gutter: 0, // Spacing from edge
                    belowOrigin: false, // Displays dropdown below the button
                    alignment: 'left', // Displays dropdown with edge aligned to the left of button
                    stopPropagation: false // Stops event propagation
                }
            );
        }
        render(){
          return(
              &lt;div className="input-field col s12"&gt;
                  &lt;a className='dropdown-button btn' data-activates='dropdown1' onClick={()=&gt; this.openDropDown} &gt;Drop Me!&lt;/a&gt;
                  &lt;ul classID='dropdown1' className='dropdown-content'&gt;
                      &lt;li&gt;&lt;a href="#!"&gt;one&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#!"&gt;two&lt;/a&gt;&lt;/li&gt;
                      &lt;li className="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#!"&gt;three&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#!"&gt;&lt;i className="material-icons"&gt;view_module&lt;/i&gt;four&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#!"&gt;&lt;i className="material-icons"&gt;cloud&lt;/i&gt;five&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>