javascript - Issue while rendering MDL text field with React.js -

i building simple login page using google's material design lite web framework , using react.js handle ui logic.

i experiencing strange issue: input text box floating label works fine when render without react, doesn't work when rendered through react class.

my code looks like:

var login = react.createclass({      render: function(){         return(             <div classname="mdl-grid">             <div classname="mdl-cell mdl-cell--2-col"></div>             <div classname="mdl-cell mdl-cell--8-col">                  <form>                     <div classname="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">                         <input classname="mdl-textfield__input" type="text" id="sample3" />                         <label classname="mdl-textfield__label" htmlfor="sample3">text...</label>                     </div>                 </form>                </div>             </div>         );       } }); 

i have made sure replace class classname , for htmlfor. doesn't work, intended label, never "floats" means stays within text box.

when copy same code , paste in html, works fine. (ofcourse change classname , htmlfor).

what can issue? help? making me nuts.

although @kevin e.' s answer correct, post answer specific react. according the official mdl docs,

...in case creating dom elements dynamically need register new elements using upgradeelement function

the issue way react works. apparently, turns out react not when of components gets mutated outside of it.

mdl tries mutate elements classes mdl-js-* achieve dynamic transitions , effects. mutation must performed inside of react, else things won't work.

the proper way call upgradeelement after react has finished rendering dom. hence call must placed in componentdidmount , componentdidupdate.

if tedious call upgradeelement on elements 1 one, use upgradedom instead. upgrade upgradable elements in dom. final code this:

var login = react.createclass({       loginrequested: function(){       alert('login requested');      },      componentdidmount: function(){         componenthandler.upgradedom();      },      componentdidupdate: function(){         componenthandler.upgradedom();     },      render: function(){         return(             <div>             <div classname="mdl-grid">             <div classname="mdl-cell mdl-cell--2-col"></div>              <div classname="mdl-cell mdl-cell--8-col">             <div classname="mdl-grid">                 <div classname="mdl-cell mdl-cell--3-col"></div>                 <div classname="mdl-cell mdl-cell--6-col">                 <form onsubmit={this.loginrequested}>                     <div classname="mdl-textfield mdl-js-textfield mdl-textfield--floating-label make-block">                         <input classname="mdl-textfield__input" type="text" id="sample3"/>                         <label classname="mdl-textfield__label" id="label-sample3" htmlfor="sample3">username</label>                     </div>                     <div classname="mdl-textfield mdl-js-textfield mdl-textfield--floating-label make-block">                         <input classname="mdl-textfield__input" type="text" id="sample3"/>                         <label classname="mdl-textfield__label" id="label-sample3" htmlfor="sample3">password</label>                     </div>                     <input type="submit" value="login" classname="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent make-block"/>                 </form>                 </div>             </div>               </div>              </div>                 </div>         );       } });