score:5

i would suggest use another child component for render your list item. in your current example you only one anchorel, which means wherever you click, always one menu open and take action of that, which is last one. if you have child component for menu item, each component will have there own state and work for that item only.

example

class main extends component {
  render() {
    let items = _.map(results, (item, index) => {
      return (
        <menuitemcomponent key={item.id} item={item} onclick={this.handleclick} ondelete={(item) => this.props.delete(item.id)} />
      )
    })

    return (
      <fragment>
        <list>
          {items}
        </list>
      </fragment>
    )
  }
}

class menuitemcomponent extends component {
  state = {
    anchorel: null,
  };

  handleclick = event => {
    this.setstate({ anchorel: event.currenttarget });
  };

  handleclose = () => {
    this.setstate({ anchorel: null });
  };

  render() {
    const { item } = this.props;
    const { anchorel } = this.state;

    return (
      <listitem
        divider
      >
        <listitemsecondaryaction>
          <iconbutton
            aria-label="more"
            aria-owns={anchorel ? 'long-menu' : null}
            aria-haspopup="true"
            onclick={this.handleclick.bind(this)}
          >
            <moreverticon />
          </iconbutton>
          <menu
            id="long-menu"
            anchorel={anchorel}
            open={boolean(anchorel)}
            onclose={this.handleclose.bind(this)}
            paperprops={{
              style: {
                maxheight: 200,
                width: 200,
              },
            }}
          >
            <menuitem>
              <iconbutton onclick={() => this.props.ondelete(item)} >
                delete entry<deleteicon />
              </iconbutton>
            </menuitem>
          </menu>
        </listitemsecondaryaction>
      </listitem>
    )
  }
}

here's a working example https://codesandbox.io/s/nn555l48xm


Related Query

More Query from same tag