CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
daydreamer
daydreamer

Reputation: 91969

Unable to draw MenuIcon Component

I am trying to build IconMenu on the AppBar Component. I am building my project using create-react-app.

My code looks like
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'

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

App.js

import React from "react";
import "./App.css";
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import MenuItem from 'material-ui/MenuItem';
import IconMenu from 'material-ui/IconMenu/IconMenu';
import IconButton from 'material-ui/IconButton/IconButton';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';

const AppMenu = () => {
    return (
        <IconMenu
            iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
            anchorOrigin={{horizontal: 'right', vertical: 'top'}}
            targetOrigin={{horizontal: 'right', vertical: 'top'}}>
            <MenuItem primaryText="Menus"/>
            <MenuItem primaryText="Summary"/>
        </IconMenu>
    );
};

const App = () => (
    <MuiThemeProvider>
        <AppBar
            title="SpicyVeggie"
            showMenuIconButton={false}
            iconElementRight={<AppMenu />}
        />
    </MuiThemeProvider>
);

export default App;

I run my application

$ yarn start
Compiled successfully!

The app is running at:

  http://localhost:3000/

Note that the development build is not optimized.
To create a production build, use yarn run build.

and do not see any errors on the console. On the browser, I see

enter image description hereub.com/facebookincubator/create-react-app

I see warning and when I click on MenuIcon on the right, nothing happens, can someone please help me understand what I am doing wrong?

The code is available in menu branch at https://github.com/hhimanshu/spicyveggie/tree/menu

Thanks in advance

Upvotes: 0

Views: 55

Answers (1)

daydreamer
daydreamer

Reputation: 91969

I found the answer, I needed react-tap-event-plugin in order for this to work

I did the following

$ npm i --save react-tap-event-plugin

and then in index.js, I did

// other imports
import injectTapEventPlugin from 'react-tap-event-plugin';
import App from './App'

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

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

and that's it!

Upvotes: 1

Related Questions