Rerendering MDL drawer menu makes drawer button disappear

Question

I'm integrating MDL into a React application.

I've just tried to make a component out of a Fixed Header layout (http://www.getmdl.io/components/index.html#layout-section) and noticed that if I hardcode the layout in the html it works as expected. However if i generate that html at runtime with JS the hamburger icon is missing.

What should I do to fix that problem?

Answer 1

When you add an element after dom is already loaded you'll need to 'upgrade' the element. To do so dom-wide, try this snippet

componentHandler.upgradeDom();

exact issue from the mdlhut

Answer 2

I have a similar problem. It seems that in this case need to re-create layout. https://github.com/google/material-design-lite/blob/master/src/layout/layout.js#L286