Sijan Bhandari Sijan Bhandari - 3 months ago 191
React JSX Question

Material-ui toolbar not rendering the expected output

I am trying to display the toolbar using material-ui according to the documentation as follows.

My toobar.js files looks like:

import React from 'react';
import IconMenu from 'material-ui/IconMenu';
import IconButton from 'material-ui/IconButton';
import FontIcon from 'material-ui/FontIcon';
import NavigationExpandMoreIcon from 'material-ui/svg-icons/navigation/expand-more';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu';
import RaisedButton from 'material-ui/RaisedButton';
import {Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} from 'material-ui/Toolbar';

export default class ToolbarExamplesSimple extends React.Component {

constructor(props) {
super(props);
this.state = {
value: 3,
};
};

handleChange(event, index, value) {
this.setState({value})
};
render() {
return (
<Toolbar>
<ToolbarGroup firstChild={true}>
<DropDownMenu value={this.state.value} onChange={this.handleChange}>
<MenuItem value={1} primaryText="All Broadcasts" />
<MenuItem value={2} primaryText="All Voice" />
<MenuItem value={3} primaryText="All Text" />
<MenuItem value={4} primaryText="Complete Voice" />
<MenuItem value={5} primaryText="Complete Text" />
<MenuItem value={6} primaryText="Active Voice" />
<MenuItem value={7} primaryText="Active Text" />
</DropDownMenu>
</ToolbarGroup>
<ToolbarGroup>
<ToolbarTitle text="Options" />
<FontIcon className="muidocs-icon-custom-sort" />
<ToolbarSeparator />
<RaisedButton label="Create Broadcast" primary={true} />
<IconMenu
iconButtonElement={
<IconButton touch={true}>
<NavigationExpandMoreIcon />
</IconButton>
}
>
<MenuItem primaryText="Download" />
<MenuItem primaryText="More Info" />
</IconMenu>
</ToolbarGroup>
</Toolbar>
);
}
}


I have a div element in my html page with id 'app'. I am trying to bind the toolbar to that div using following code in my app.js.

import React from 'react';
import {render} from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import ToolbarExamplesSimple from './toolbar'; // Our custom react component

injectTapEventPlugin();

render(<ToolbarExamplesSimple />, document.getElementById('app'));


And following error is displayed in the console:

*Warning: Failed context type: Required context `muiTheme` was not specified in `Toolbar`.
in Toolbar (created by ToolbarExamplesSimple)
in ToolbarExamplesSimple*

Answer

You should wrap your app component in the <MuiThemeProvider>. Take a look here.

import React from 'react';
import {render} from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import ToolbarExamplesSimple from './toolbar'; // Our custom react component

const App = () => (
  <MuiThemeProvider>
    < ToolbarExamplesSimple />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);