CODEWITHSUNDEEP
javascriptreactjs
Marcin Wasilewski
Marcin Wasilewski

Reputation: 735

Handling clicks on a List of menu items in React and material-ui

I have a menu component in React which utilises material-ui List component that looks sort of like this:

handleMenuItemClick() {
    // go to route defined in the ListItem
}

class MenuList extends React.Component {
    render() {
        return (
            <div>
                <List
                    onClick={this.handleMenuItemClick}
                >
                    <ListItem button route="/dashboard">
                        <DashboardIcon /> <ListItemText primary="Dashboard" />
                    </ListItem>
                    <ListItem button route="/investments">
                        <InvestmentsIcon /> <ListItemText primary="My investments" />
                    </ListItem>
                </List>
            </div>
        );
    }
}

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?

I don't want separate click handlers for each of the menu items.

Upvotes: 1

Views: 1187

Answers (1)

Gavin Thomas
Gavin Thomas

Reputation: 1867

import {Link} from 'react-router-dom'
                       <ListItem
                            component={Link}
                            to="/"
                            button >

Referenced from a here

Upvotes: 3

Related Questions