Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Having trouble using Appbar + Drawer (Material UI + ReactJS)

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
like image 857
Javier Muñoz Avatar asked Feb 06 '23 13:02

Javier Muñoz


1 Answers

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;
like image 132
Alexandr Lazarev Avatar answered Feb 09 '23 02:02

Alexandr Lazarev