Get value of MenuItem material ui

Question

I'm using Material UI for Menu and Menu Item. I'm trying to get the value of a menu item, but it doesn't work.

This is my code :

<Menu value= { this.state.selectedItem }>
  <MenuItem onClick={this.listClicked} 
    leftIcon={
      <FontIcon 
        className="material-icons"
        style={{ color: 'white', margin: '0' }}>
          format_list_bulleted
      </FontIcon>
    }
  />     
  <MenuItem onClick={this.settingClicked} 
    leftIcon={
      <FontIcon 
        className="material-icons"
        style={{ color: 'white', margin: '0' }}>
          settings
      </FontIcon>
    } 
  />
</Menu>

public listClicked = (value) => {
  this.setState({
    selectedItem :value
  })
  console.log(this.state.selectedItem)
}

I don't get the value, and in the console of navigator I have an object.

Can you help me?

Thank you

Christiaan Westerbeek · Answer 1 · 2019-11-26T19:22:12.577

29

Use a data-attribute on the menu item and access it from the currentTarget of the click event. Note that data-my-value attribute becomes myValue on event.currentTarget.dataset.

const handleClick = event => {
    const { myValue } = event.currentTarget.dataset;
    console.log(myValue) // --> 123
}

<MenuItem
    data-my-value={123}
    onClick={handleClick}
>
    <div>text</div>
</MenuItem>

Why currentTarget instead of target? The currentTarget refers to the element that the event listener is directly attached to while the target refers to the specific element within MenuItem, such as some div, that is clicked on. That div does not have the data-my-value attribute and as such the target wouldn't have myValue on its dataset. So use currentTarget in this case.

Related: How to access custom attributes from event object in React?

edited Nov 26 '19 at 19:22

answered Apr 05 '19 at 10:39

Christiaan Westerbeek

10,619
13
64
89

1

not working for MUI 5 – Juan Salvador Apr 07 '22 at 06:29
seems unlikely that it's related to mui 5. Are you using event.target or event.currentTarget? https://github.com/mui/material-ui/issues/3311#issuecomment-405831602 – Christiaan Westerbeek Apr 07 '22 at 07:42
`event.currentTarget` – Juan Salvador Apr 08 '22 at 04:18
At this point it's going to mean to help you debug your code or prove to you it is or is not caused by mui5. Here is not the place for that. What you can do though is create a new (quality) question on SO. You might find yourself solving your code while doing that. Good luck! – Christiaan Westerbeek Apr 08 '22 at 13:12

score 7 · Answer 2 · answered May 09 '17 at 13:23

In the Material UI Menu component, firing functions when selecting a menu item is best done with the onChange handler of the parent Menu component instead of onClick handlers for each separate item. The signature of the onChange callback is function(event: object, value: any) => void, so you can give each of your MenuItems a separate value prop, and this will be available as the second argument in your onChange handler. Like this:

<Menu value= { this.state.selectedItem } onChange={ this.menuClicked }>
  <MenuItem value="list" leftIcon={
    <FontIcon className="material-icons">format_list_bulleted</FontIcon>
  } />     
  <MenuItem value="settings" leftIcon={
    <FontIcon className="material-icons">settings</FontIcon>
  } />
</Menu>

...

public menuClicked = (event, value) => {
  this.setState({
    selectedItem: value
  })
  console.log(this.state.selectedItem)
}

Thank you, but like the answer of @Shubham khatri, I have a null value in my console, or an undifined .. I don't understand.. — Anaïs Saez, May 09 '17 at 13:38
I had to do `(event, { props: { value } }) => { console.log(value); };` — Robin C Samuel, Jan 29 '20 at 14:03

score 7 · Answer 3 · answered Sep 15 '18 at 21:52

7

I used NativeEvent and it works for me.

handleClose = (ev) => {
        this.setState({
            anchorEl: null
        });
        console.log(ev.nativeEvent.target.outerText);
    };

Try like this please.

answered Sep 15 '18 at 21:52

Elman Huseynov

1,127
1
8
18

score 6 · Answer 4 · answered Jun 18 '18 at 04:17

6

Menu does not have onChange defined in the API and it did not work for me because it is never called. What works for me was an ugly solution:

<MenuItem onClick={this.handleClose.bind(this, 'valueHere')}>Text here</MenuItem>

answered Jun 18 '18 at 04:17

Hernan

69
1
3

1

also `e.currentTarget.outerText` for MUI 5.x – Juan Salvador Apr 07 '22 at 06:27

score 6 · Answer 5 · answered Mar 14 '21 at 13:14

Try e.target.innerText in MenuItem onClick.

const Menu = () => {
    const [anchorEl, setAnchorEl] = useState(null)

    const handleClick = event => {
        setAnchorEl(event.currentTarget)
    }

    const handleClose = e => {
        console.log(e.target.innerText) // => This logs menu item text.
        setAnchorEl(null)
    }

    return (
        <div>
            <Button onClick={handleClick}>Open Menu</Button>
            <Menu anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
                <MenuItem onClick={handleClose}>Logout</MenuItem>
            </Menu>
        </div>
    )
}

score 3 · Answer 6 · answered Jan 20 '18 at 03:05

Use a feature in JavaScript called curry

This is in menu

 <MenuItem  onClick={this.closeDrawer("ProductPage")}>
        Products
 </MenuItem>

This is in handler

closeDrawer = key => event => {
    console.log("=> closeDrawer key", key);
    this.setState({ open: false });
  };

Then you would see something like below in JavaScript console

=> closeDrawer key ProductPage

score 1 · Answer 7 · answered Oct 09 '17 at 09:17

You can also get the value like this

<MenuItem key={menu.id} primaryText={menuItem.name} onClick = {this.onClickButton} menuItems = {this.subMenu(menuItem.children)}/>

and then onClickButton like this

onClickButton = (ev) => {
      if(ev.target.innerText === 'light') { // light is the value of menuitem in string
        this.props.dispatch(changeTheme('light'))
      } 
    }

score 0 · Answer 8 · answered May 09 '17 at 13:23

0

The parameter that is passed to the onClick handler is an event not a value. You have to extract the value from the event.

public listClicked = (event) => {
        this.setState({
            selectedItem :event.target.value
        },()=>{
       console.log(this.state.selectedItem)
        })
    }

Also move the console.log as a callback as that way it is called only after the state change has taken place.

answered May 09 '17 at 13:23

mrinalmech

2,065
1
20
18

The value is not an attribute of event.target. event.target has a
element which contains the value. Getting it is not so easy.

Roger Veciana

Jun 20 '18 at 08:28

score 0 · Answer 9 · answered May 09 '17 at 13:24

0

onClick is not specified as a property for MenuItem, you can put a onChange on Menu and get the value of the selected item like

  <Menu value= { this.state.selectedItem } onChange={this.selectedItem}
            <MenuItem leftIcon={
                <FontIcon className="material-icons" style={{ color: 'white', margin: '0' }}>format_list_bulleted</FontIcon>
            } />     

            <MenuItem leftIcon={
                <FontIcon className="material-icons" style={{ color: 'white', margin: '0' }}>settings</FontIcon>
            } />

        </Menu>


        selectedItem=(e, value)=> {
             this.setState({
                selectedItem :value
             }, () => {console.log(this.state.selectedItem)})
        }

answered May 09 '17 at 13:24

Shubham Khatri

270,417
55
406
400

If you still wanna use onClick on menuItem see @mrinalmech answer – Shubham Khatri May 09 '17 at 13:25
Hi, thank you for your anwer, i'm trying your solution, but it doesn't work. In the console of the navigator I have an "undifined" .. An idea ? Thank you – Anaïs Saez May 09 '17 at 13:31
Do you write the selectedItem function in the same component as Menu – Shubham Khatri May 09 '17 at 13:33
can you console.log(e, value) in the selectedItem function – Shubham Khatri May 09 '17 at 13:40
Yes, I have this : Proxy { : Object, : Object } undefined – Anaïs Saez May 09 '17 at 13:41
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/143790/discussion-between-shubham-khatri-and-anais-saez). – Shubham Khatri May 09 '17 at 13:43

score 0 · Answer 10 · answered Dec 28 '19 at 11:44

Add a 'value' attribute to the MenuItem component. Then use the getAttribute() function to get the value of the 'value' attribute. Here's an example...

const someMenu = () => {
    const [element, setElement] = React.useState(null)

    const handleClose = event => {
       setElement(null)

       // grab the value of the "value" attribute here
       console.log(event.target.getAttribute("value")
    }

    const handleClick = event => {
       setElement(event.currentTarget)
    }

    return(
        <Menu anchorEl={element} keepMounted open={Boolean(element)}>
            <MenuItem value="foo" onClick={handle} />
        </Menu>
    )
}

What version of MUI are you using? This is not working for me. I am getting: e.target.getAttribute is not a function — lmurdock12, Feb 22 '23 at 09:49

Get value of MenuItem material ui

10 Answers10

Linked