I'm experimenting with React, incorporating the AppBar and Drawer components from v0 Material-UI as functional components. I've defined the handleDrawerClick function within the class and passed it as a prop to be used as a click event in the functional component. However, I am facing an issue where passing the function as a prop might not be working as expected. If there's an alternative method to achieve the desired functionality on click, I would greatly appreciate any assistance. It's important that we utilize the fancy components within the functional components while rendering them in the class, just like demonstrated in the Demo. The functionality of opening and closing the drawer should be controlled by the onLeftIconButtonClick.
I have provided a functioning demo on StackBlitz here => Working Demo
Below is the 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'));