score:4

Accepted answer

Great first post! Good call on limiting use of refs too.

One approach could be to keep some state in your ListItemPage component of which menu should be currently displayed.

constructor(props, context) {
    super(props, context);
    this.state = { showMenu: null };
}

Then, in your onMenuClick function, receive the id of the item to show the menu for, and assign to state.

onMenuClick(id) {
  this.setState({ showMenu: id });
}

This would be passed into your Menu as follows.

showMenu={this.state.showMenu === listItem.id}

Closing the menu would just need to reset the value of this.state.showMenu to null.

This is assuming there would only be one menu displayed at a given time. If that's not true, let me know and I'll update.


Related Query

More Query from same tag