CODEWITHSUNDEEP
reactjsnavigation
Mayank Bansal
Mayank Bansal

Reputation: 2075

How to activate the links in Navigation Drawer

I have defined the following Navigation Drawer:

<Drawer
    id="homepage-drawer"
    type={Drawer.DrawerTypes.TEMPORARY}
    visible={visible}
    position={position}
    overlay
    clickableDesktopOverlay={true}
    onVisibilityToggle={this.handleVisibility}
    navItems={item}
    defaultMedia={'desktop'}
    onClick={this.handleAction.bind(this)}
    header={(
        <Toolbar
            nav={isLeft ? null : closeBtn}
            actions={isLeft ? closeBtn : null}
            className="md-divider-border md-divider-border--bottom"
        />
    )}
/>

The following is the list of my navItems:

const item = ["About", "Contact Us", "FAQ", "Privacy Policy", "Logout"]

I want that whenever I click the following tab, the corresponding link should get open and I am trying to do this using the onClick event but nothing is happening.

Upvotes: 1

Views: 260

Answers (1)

Vikas Singh
Vikas Singh

Reputation: 1847

Create a dictionary like : 

const dictionary = {
     about: {
         name: "About",
         link: "/about"
     },
     contact : {
         name : "Contact Us",
         link : "/contact_us"
     },
     faq : {
         name : "FAQ",
         link : "/faq"
     },
     privacy : {
         name : "Privacy Policy",
         link : "/privacy_policy"
     },
     logout : {
         name : "Logout",
         link : "/logout"
     }
}

then run a for loop on your Array and return,

<a href = {dictionary.about.link}>{dictionary.about.name}</a>

Upvotes: 1

Related Questions