reactjs - How i can use DropDown from Materialize css in React -

how can use dropdown materialize css in react component? when click on button, there no dropdown content code below:

import react , {component} 'react'; import 'materialize-css';  export default class extends component{       opendropdown(){           $('.dropdown-button').dropdown({                   induration: 300,                   outduration: 225,                   constrainwidth: false, // not change width of dropdown of activator                   hover: true, // activate on hover                   gutter: 0, // spacing edge                   beloworigin: false, // displays dropdown below button                   alignment: 'left', // displays dropdown edge aligned left of button                   stoppropagation: false // stops event propagation               }           );       }       render(){         return(             <div classname="input-field col s12">                 <a classname='dropdown-button btn' data-activates='dropdown1' onclick={()=> this.opendropdown} >drop me!</a>                 <ul classid='dropdown1' classname='dropdown-content'>                     <li><a href="#!">one</a></li>                     <li><a href="#!">two</a></li>                     <li classname="divider"></li>                     <li><a href="#!">three</a></li>                     <li><a href="#!"><i classname="material-icons">view_module</i>four</a></li>                     <li><a href="#!"><i classname="material-icons">cloud</i>five</a></li>                 </ul>             </div>         )     } } 

there's import materialize, (it's react compatible materialize module, makes work super easy!) suggest using it, rather making yourself.

though docs yet complete, can refer them! getting started materialize react : https://react-materialize.github.io/#/

materialize dropdown here : https://react-materialize.github.io/#/dropdown

good going!