Skip to content

Instantly share code, notes, and snippets.

@t0mdicks0n
Created June 16, 2018 21:59
Show Gist options
  • Save t0mdicks0n/f5b26761aed7133e5f89b2b0920a5077 to your computer and use it in GitHub Desktop.
Save t0mdicks0n/f5b26761aed7133e5f89b2b0920a5077 to your computer and use it in GitHub Desktop.
Code snippet of an issue occuring after migrating to Material UI V1.
import React from 'react';
import ReactDOM from 'react-dom';
import { Link, withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';
import compose from 'recompose/compose';
// Material UI Imports:
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Menu, { MenuItem } from '@material-ui/core/Menu';
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = {
anchorEl: null,
}
this.handleClick = this.handleClick.bind(this);
this.handleClose = this.handleClose.bind(this);
}
handleClick (event) {
this.setState({ anchorEl: event.currentTarget });
};
handleClose (route) {
this.setState({ anchorEl: null });
if (route === 'Home') {
this.props.history.push('/')
} else {
// this.props.history.push('/test')
}
};
render () {
const { anchorEl } = this.state;
return (
<div>
<div className={this.props.classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton
className={this.props.classes.menuButton}
color="inherit"
aria-label="Menu"
onClick={this.handleClick}
>
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" className={this.props.classes.flex}>
Menu
</Typography>
<Menu
id="simple-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.handleClose}
>
<MenuItem onClick={()=>this.handleClose('Home')}>Home</MenuItem>
{/*<MenuItem onClick={()=>this.handleClose('Test')}>My account</MenuItem>*/}
</Menu>
{/*<Button color="inherit">Login</Button>*/}
</Toolbar>
</AppBar>
</div>
</div>
)
}
}
Navbar.propTypes = {
classes: PropTypes.object.isRequired,
};
const styles = {
root: {
flexGrow: 1,
},
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
// Worked before updating Material UI to V1 and React to required 16.3.0:
export default withRouter(withStyles(styles)(Navbar));
/*export default compose(
withRouter,
withStyles(styles)
)(Navbar);*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment