I'm trying to do my first app with ReactJS + Material UI but without success.
The only thing I want to do is, when I do click in the button on the bar, display a left drawer.
I have the following code (App.jsx):
import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import AppBar from 'material-ui/AppBar';
import LeftDrawer from './LeftDrawer.jsx';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {open: false};
}
handleTouchMap() {
this.setState({open: !this.state.open});
}
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
<div>
<AppBar
title = { "Test 1" }
onLeftIconButtonTouchTap={this.handleTouchMap.bind(this)}
/>
<LeftDrawer open={this.state.open} />
</div>
</MuiThemeProvider>
);
}
}
export default App;
And the next (LeftDrawer.jsx):
import React from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
class LeftDrawer extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Drawer open={this.state.open}>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
</Drawer>
</div>
);
}
}
export default LeftDrawer;
And I'm always getting this:
Warning: Failed prop type: Invalid prop `children` supplied to `MuiThemeProvider`, expected a single ReactElement.
in MuiThemeProvider (created by App)
in App
Uncaught Invariant Violation: MuiThemeProvider.render():
A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
Do you have an idea what I'm doing wrong? Please!
If I put a <div>
to wrap <Appbar>
and <Leftdrawer>
in App.jsx. It solves the MuiThemeProvider error.
But now, I get the following error:
Uncaught TypeError: Cannot read property 'open' of null
You should store the opening state of drawer in App
component's state, and pass it as a prop to Drawer
component.
App.jsx:
class MatApp extends React.Component {
constructor(props) {
super(props);
this.state = {open: false};
}
handleTouchMap() {
this.setState({open: !this.state.open});
}
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
<AppBar
title = { "Test 1" }
onLeftIconButtonTouchTap = { this.handleTouchMap.bind(this) }
/>
<LeftDrawer open={this.state.open} />
</MuiThemeProvider>
);
}
}
export default App;
LeftDrawer.jsx:
class LeftDrawer extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Drawer open={this.props.open}>
<MenuItem>Menu Item</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
</Drawer>
</div>
);
}
}
export default LeftDrawer;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With