title: Handling clicks on a List of menu items in React and material-ui
body: <p>I have a menu component in React which utilises material-ui List component that looks sort of like this:</p>
  
  <pre><code>handleMenuItemClick() {
      // go to route defined in the ListItem
  }
  
  class MenuList extends React.Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;List
                      onClick={this.handleMenuItemClick}
                  &gt;
                      &lt;ListItem button route="/dashboard"&gt;
                          &lt;DashboardIcon /&gt; &lt;ListItemText primary="Dashboard" /&gt;
                      &lt;/ListItem&gt;
                      &lt;ListItem button route="/investments"&gt;
                          &lt;InvestmentsIcon /&gt; &lt;ListItemText primary="My investments" /&gt;
                      &lt;/ListItem&gt;
                  &lt;/List&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>What I want to do is to go to different route defined the route attribute of the ListItem. How do I do this in React?</p>
  
  <p>I don't want separate click handlers for each of the menu items.</p>