Material-UI component in React Router Link triggering the link

Question

I use material-ui components in react with react-router. I have a problem when I want to display list-items that are supposed to work as link elements, but also contain a submenu inside that should not trigger the parent link. It does and I don't know how to disable it.

var iconMenu =
    <IconMenu iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}>
      <MenuItem primaryText='change name' onTouchTap={this.edit}/>
      <MenuItem primaryText='delete' onTouchTap={this.delete} />
    </IconMenu>


<ListItem
          key={i}
          containerElement={<Link to={`/items/${item.id}`} />}
          rightIconButton={iconMenu}
/>

When I click the iconMenu button, I do not want the <Link to={`/items/${item.id}`} /> to be triggered, so that I stay in the page. But it does. So how can I fix this problem? I tried to add event handler to run stopPropagation() but it was not successful...

Thanks!

Do you have to use a <Link>? Maybe, as a workaround, you could use a function called when ListItem onTouchTap is activated and navigate programatically using React Router — César Landesa
– César Landesa, Commented Nov 2, 2016 at 15:58
@CésarLandesa Not really. But we were using that before and that causes some other associated problems... — Emo
– Emo, Commented Nov 2, 2016 at 16:10

Alf Eaton · Accepted Answer · 2017-04-12 19:45:39Z

3

For React Router v4, add

onTouchTap={() => this.props.history.push(`/items/${item.id}`)}

to the ListItem, instead of containerElement.

Use import { withRouter } from 'react-router-dom' and export default withRouter(Foo) to add history to the component's props.

answered Apr 12, 2017 at 19:45

Alf Eaton

5,5324 gold badges49 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:25:42Z

1

First of all, I'd like to admit that I do not like material-ui and thus do not recommend it to people who consider starting a project with it. The reasoning behind is that you sacrifice too much time customising the components to your needs - a solution that is opposite to the idea of React. It also uses inline styles that you always have to overwrite in the component file, not in your scss or less. This sucks big time. I don't even mention all the UI interaction actions that are handled with JS that could make your performance ache.

Another short mention is to the react-router. Unfortunately I'm not a fan of it either. Guys, why do you change the API in every next release? Why is it so damn difficult to just reset the location queries? Just look at FlowRouter and see how fantastic a route API should be implemented.

Anyways, my solution was to implement a wrapper around the <Link /> component and move the <IconMenu /> outside of the <Link /> wrapper:

<li key={i}>
  <ListItem
          key={i}
          containerElement={<Link to={`/items/${item.id}`} />}
  />
  {iconMenu}
</li>

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Nov 3, 2016 at 10:56

Emo

6201 gold badge9 silver badges29 bronze badges

3 Comments

JohnnyQ Over a year ago

why do you change the API in every next release? Welcome to the JS world.

Pavan Over a year ago

What are the alternatives for material-ui then? Requirement: Library should be component rich and there should be uniformity in the component design

jami0821 Over a year ago

@chenop For material-ui v1.0, instead of referencing a component with containerElement, you should use: component={Link} to={`/items/${item.id}`}. See: material-ui-1dab0.firebaseapp.com/component-demos/buttons

Collectives™ on Stack Overflow

Material-UI component in React Router Link triggering the link

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related