I am stuck as to lastRowFixedOnly requires a javascript to be run in order to make it work. Where should I write it? While defining the Component ToolBar, I wrote it in componentDidMount method but it gives me an error of mdc is not defined.
import React from "react";
import Toolbar from "react-mdc-web/lib/Toolbar/Toolbar";
import ToolbarRow from "react-mdc-web/lib/Toolbar/ToolbarRow";
import ToolbarSection from "react-mdc-web/lib/Toolbar/ToolbarSection";
import ToolbarTitle from "react-mdc-web/lib/Toolbar/ToolbarTitle";
export class Header extends React.Component{
componentDidMount() {
const s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.innerHTML = "var toolbar = mdc.toolbar.MDCToolbar.attachTo(document.querySelector('.mdc-toolbar')); toolbar.fixedAdjustElement = document.querySelector('.mdc-toolbar-fixed-adjust');";
document.body.appendChild(s);
}
render(){
return(
<Toolbar fixed fixedLastRowOnly>
<ToolbarRow>
<ToolbarSection>
<h1>This is row 1</h1>
</ToolbarSection>
</ToolbarRow>
<ToolbarRow>
<ToolbarSection>
<ToolbarTitle>Title</ToolbarTitle>
</ToolbarSection>
</ToolbarRow>
<ToolbarRow>
<ToolbarSection>
<ToolbarTitle>Title</ToolbarTitle>
</ToolbarSection>
</ToolbarRow>
</Toolbar>
);
}
}
I am stuck as to lastRowFixedOnly requires a javascript to be run in order to make it work. Where should I write it? While defining the Component ToolBar, I wrote it in componentDidMount method but it gives me an error of mdc is not defined.