CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterial-ui
Subhojit
Subhojit

Reputation: 1541

Material-UI AppBar click is not working in react

I'm trying some things in react. I'm rendering the AppBar and the Drawer from v0 Material-UI as functional components. I have added the handleDrawerClick function in the class and sending the function as a props to use as a click function in the functional component. But the click function is not working. The problem here is wrapping up the function as the param and passing it as props might not be working. If there's any other way to achieve the click any help would be appreciated but we need to make sure that we're using the fancy components in the functional components and rendering those in the class just like shown in the Demo. onLeftIconButtonClick, the drawer open and closing needs to get controlled.

I have added one working demo here through stackblitz => Working Demo

Here's my code:

import React, { Component } from 'react';
import { render } from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import './style.css';

export const getMenuBar = (isBarOpened) => {
  return(
    <Drawer open={isBarOpened}>
      <MenuItem>Menu Item</MenuItem>
      <MenuItem>Menu Item 2</MenuItem>
    </Drawer>
  );
}

export const getAppBar = (handleDrawerClick) => {
  return(
    <AppBar 
      title="My AppBar" 
      className="st_appBarClass" 
      titleStyle={{ color: "#FFFFFF" }}
      onLeftIconButtonClick={handleDrawerClick()}
    />
  );
}

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      isMenuOpened: false
    };
  }

  handleDrawerClick = (e) => {
    console.log(e);
    if(e) {
      this.setState({ isMenuOpened: !this.state.isMenuOpened });
    }
  }

  render() {
    return (
      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
        <div className='product-list-wrapper'>
          {/*<ProductList products={products} />*/}
          {getAppBar(this.handleDrawerClick)}
          {getMenuBar(this.state.isMenuOpened)}
        </div>
      </MuiThemeProvider>
    )
  }
}

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

Upvotes: 0

Views: 1196

Answers (2)

gdh
gdh

Reputation: 13682

To open menu remove unnecessary round brackets

<AppBar 
      title="My AppBar" 
      className="st_appBarClass" 
      titleStyle={{ color: "#FFFFFF" }}
      onLeftIconButtonClick={handleDrawerClick}//<---here
    />

To close menu provide an onClick to the parent div

<div onClick={this.handleDrawerClick} className='product-list-wrapper'> //<----here
          {/*<ProductList products={products} />*/}
          {getAppBar(this.handleDrawerClick)}
          {getMenuBar(this.state.isMenuOpened)}
        </div>

Upvotes: 1

kyun
kyun

Reputation: 10264

export const getAppBar = (handleDrawerClick) => {
  return(
    <AppBar 
      title="My AppBar" 
      className="st_appBarClass" 
      titleStyle={{ color: "#FFFFFF" }}
      onLeftIconButtonClick={handleDrawerClick} //Remove ()
    />
  );
}

Upvotes: 1

Related Questions