[Solved] Unknown props with Material UI

I use this code to check if the user is logged in or not:
Menu.jxs

render() {
      let renderMenu;
      if(Meteor.user()) {
        renderMenu = <MenuItem onTouchTap={this.signOut}>Sign Out</MenuItem>
      } else {
        renderMenu = <div>
          <MenuItem containerElement={<Link to="signin"/>}>Sign In</MenuItem>
          <MenuItem containerElement={<Link to="signup"/>}>Sign Up</MenuItem>
        </div>
      }
      return (
          <div>
              <AppBar
                  title={<span style={styles.title}>My Blog</span>}
                  onLeftIconButtonTouchTap={this.toggleLeftMenu}
                  onTitleTouchTap={() => this.goToPage('')}
                  iconElementRight={
                      <IconMenu
                          iconButtonElement={
                              <IconButton><MoreVertIcon /></IconButton>
                          }
                          targetOrigin={{horizontal: 'right', vertical: 'top'}}
                          anchorOrigin={{horizontal: 'right', vertical: 'top'}}
                          >
                            {renderMenu}
                          </IconMenu>
                      }
              />
              <LeftMenu
                  isOpen={this.state.openLeftMenu}
                  toggleOpen={this.toggleLeftMenu}
              />
          </div>
      );

And get this error when I click the right icon to open the menu:

Warning: Unknown props `desktop`, `focusState` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Menu)
    in div (created by List)
    in List (created by Menu)
    in div (created by Menu)
    in ClickAwayListener (created by Menu)
    in Menu (created by IconMenu)
    in div (created by PopoverAnimationDefault)
    in div (created by PopoverAnimationDefault)
    in div (created by Paper)
    in Paper (created by PopoverAnimationDefault)
    in PopoverAnimationDefault

How to fix it, plz help!

That usually means that a component is getting passed some props that it was not expecting. So you will either have to have the receiving component expect the props or stop passing them.

These two discussion might help:

and

1 Like

I figured it out, IconMenu expects MenuItem, not div…