Setting activeItem for Tab Menu

[wjustin]

Hello,

I am trying to use the a TabMenu component in my application. I have created the following TabMenu:

Code: Select all

import React, { Component } from 'react';
import { TabMenu } from 'primereact/components/tabmenu/TabMenu';


export class MyMenuBar extends Component {
    constructor(props) {
        super(props);
        // this.updateMenu = this.updateMenu.bind(this),
        this.state = {
            items: [
                { label: "Item1", command: () => { window.location = "#/Item1" } },
                { label: "Item2", command: () => { window.location = "#/Item2" } },
                { label: "Item3", command: () => { window.location = "#/Item3" } },
                { label: "Item4", command: () => { window.location = "#/Item4" } },
                { label: "Item5", command: () => { window.location = "#/Item5" } },
                { label: "Item6", command: () => { window.location = "#/Item6" } }
            ],
        };
    }
    render() {
        return <div className="top-nav">
            <TabMenu model={this.state.items} activeItem={this.state.activeItem} onTabChange = {(e) => this.setState({ activeItem: e.value })} />
        </div>
    }
}

export default MyMenuBar 

I am then placing the menu on my pages like this:

Code: Select all

<MyMenuBar />

I am trying to figure out how to set the "activeItem" for the tab menu so that if I am on the Item4 page, the Item4 menu tab shows as being active.

I have tried:

Code: Select all

<MyMenuBar activeItem={this.state.activeItem="4"}  />,
<MyMenuBar activeItem={this.state.activeItem[4]} />,
<MyMenuBar activeItem={this.state.activeItem="Item4"} />,
<MyMenuBar activeItem="Item4" />

and nothing seems to work.

I am fairly new to react, so I feel that I may be missing something basic in how react passes props and state, but I am currently at a loss.

Any help would be greatly appreciated.

Thanks!

[wjustin]

Anybody have and direction they can give me in how to change the active menu item for this issue? Am I using this component incorrectly? I am trying to use it for navigation in my app and the documentation on how to use the activeItem for tabbed menu items is very limited. All I can find on the primereact page is this:

Controlled Component
In controlled mode, activeItem and onTabChange properties must be defined along with the model.


<TabMenu model={this.state.items} activeItem={this.state.activeItem} onTabChange={(e) => this.setState({activeItem: e.value})}/>

but there is no implementation of the activeItem that I can find. Any help would be greatly appreciated.

Thanks,
-Justin