Material-ui: MenuItems losing context within an iterator

Created on 12 Dec 2017 · 2Comments · Source: mui-org/material-ui

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Passing loop element to MenuItem onClick, the elements is always the last element in the array.

Current Behavior

Passing loop element to MenuItem onClick should pass the current element being iterated over.

Steps to Reproduce (for bugs)

go to https://codesandbox.io/s/y3z5kq8mvz
Click any item in 'open one' and it will console.log 'closing two'. It should console.log 'closing one'.

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | beta23 |
| React | 16.2.0 |
| browser | chrome 62 |
| etc | macos |

bug 🐛 Menu

Source

pkgmain

Most helpful comment

@barrongineer , the code you posted in codesandbox has a problem:

Regardless of the button clicked, either button one or button two, both menus will be opened. The second menu will stay on top of the first one. Therefore, whenever you click the menu, it will console.log closing two.

If the code is updated to correctly open each menu when the corresponding button clicked, the problem will go.

I reckon you update your codesandbox example or this one should not be considered as a bug.

It's the code copied from your codesandbox, and both menus rely on the same state open.

````
class SimpleMenu extends React.Component {
state = {
anchorEl: null,
open: false,
things:['one', 'two']
};

handleClick = event => {
this.setState({ open: true, anchorEl: event.currentTarget });
};

handleRequestClose = (thing) => {
console.log(closing ${thing})
this.setState({ open: false });
};

render() {
return (

{this.state.things.map(thing => {
return (

aria-owns={this.state.open ? 'simple-menu' : null}
aria-haspopup="true"
onClick={this.handleClick}>
Open {thing}

          <Menu anchorEl={this.state.anchorEl}
            open={this.state.open}
            onRequestClose={this.handleRequestClose}>
            <MenuItem onClick={() => this.handleRequestClose(thing)}>Profile</MenuItem>
            <MenuItem onClick={() => this.handleRequestClose(thing)}>My account</MenuItem>
            <MenuItem onClick={() => this.handleRequestClose(thing)}>Logout</MenuItem>
          </Menu>
        </div>
      )
    })}

  </div>
);

}
}
````

t49tran on 13 Dec 2017

❤1 👍1

All 2 comments