How to get AppBar menu working in reagent material-ui

Question

I am trying to get AppBar to work with IconMenu, as in the example here , but the menu will not pop up. This is my code (exact copy of the sample code):

import React from 'react'
import ReactDOM from 'react-dom'

import AppBar from 'material-ui/lib/app-bar';
import IconButton from 'material-ui/lib/icon-button';
import NavigationClose from 'material-ui/lib/svg-icons/navigation/close';
import IconMenu from 'material-ui/lib/menus/icon-menu';
import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';
import MenuItem from 'material-ui/lib/menus/menu-item';

const AppBarExampleIconMenu = () => (
  <AppBar
    title="Title"
    iconElementLeft={<IconButton><NavigationClose /></IconButton>}
    iconElementRight={
      <IconMenu
        iconButtonElement={
          <IconButton><MoreVertIcon /></IconButton>
        }
        targetOrigin={{horizontal: 'right', vertical: 'top'}}
        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
      >
        <MenuItem primaryText="Refresh" />
        <MenuItem primaryText="Help" />
        <MenuItem primaryText="Sign out" />
      </IconMenu>
    }
  />
);

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

AppBar is displayed normally, but does not respond to clicking the menu icon. This is what is displayed in google chrome plugin:

I assume the line with "null" has something to do with the problem ...?

(using material-ui 0.14.2, react 0.14.6)

Answer 1

Have you tried turning on let so that the parent property passes? How:

  <IconMenu
    iconButtonElement={
      <IconButton><MoreVertIcon /></IconButton>
    }
    targetOrigin={{horizontal: 'right', vertical: 'top'}}
    anchorOrigin={{horizontal: 'right', vertical: 'top'}}
    {...props}
  >
    <MenuItem primaryText="Refresh" />
    <MenuItem primaryText="Help" />
    <MenuItem primaryText="Sign out" />
  </IconMenu>

I believe that AppMenu will give IconMenu an “open” support to make it work well.