Fluent UI React commandbar usestate not possible

Question

I am a newbee on Fluent UI React components. I am trying to implement React Router on the commandbar control from fluent UI react found here it is CommandBar with overflowing menu items. If I want to navigate to a different page with the menu items I use the history.push("/myLink") as explained here. But in order to get that working I would need to have access to useState in the functional component. the code looks like this:

        export const CommandBarBasicExample: React.FunctionComponent = () => {
        const [refreshPage, setRefreshPage] = useState(false);
      return (
        <div>
          <CommandBar
            items={_items}
            overflowItems={_overflowItems}
            overflowButtonProps={overflowProps}
            farItems={_farItems}
            ariaLabel="Use left and right arrow keys to navigate between commands"
          />
        </div>
      );
    };

    const _items: ICommandBarItemProps[] = [
      {
        key: 'newItem',
        text: 'New',
        cacheKey: 'myCacheKey', // changing this key will invalidate this item's cache
        iconProps: { iconName: 'Add' },
        subMenuProps: {
          items: [
            {  //first item in the menu
        key: "AddProperty",
        text: "Properties",
        iconProps: { iconName: "Add" },
        ["data-automation-id"]: "newProperty", // optional
        onClick: ()=>{handleclick()
        setRefreshPage(true);
        };
            {
              key: 'calendarEvent',
              text: 'Calendar event',
              iconProps: { iconName: 'Calendar' },
            },
          ],
        },
      },

The Problem I have is that if I use setRefreshPage(true) VS code complains that the state variable is not recognized. if I put the useState somewhere else React complaints of a illegal use of useState. How can I get useState to be usable in the const _items object?? any help would be greatly appreciated.

Can you explain the problem - are you just trying to navigate on command bar button click? — Mavi Domates, Nov 05 '20 at 19:49
Indeed! If I click the commandbar item I would like to navigate to the properties component. This component contains my business logic. But when I click the button nothing happens. I rebuild the application with Create react app and typescript to see how it behaves in the browser. If I use BrowserRouter and use the history.push("/Properties") it changes the URL on top of the page but it does not refresh. Therefore I would need to trigger a useState but I cannot access the useState in the _items [] object. I hope this makes sense? — g00golplex, Nov 05 '20 at 20:02
And why do you need to push to history? In that surface you can't access the back button anyways? — Mavi Domates, Nov 06 '20 at 23:29
I do no not necessarily need history.push. I just want to navigate to my UI component which contains the business logic. So I would like to use the menu to go to all UI screens I need for my busines logic because there are several parts of the application which require a different UI and therefore I would like need some navigation. :-) — g00golplex, Nov 08 '20 at 20:13

score 1 · Accepted Answer · answered Nov 12 '20 at 00:22

Here's what's working for me with the same command bar component.

You have to make sure your router is setup as HashRouter and the path properties of your <Route/> s are setup like /#properties through the href property of the button - and not through onClick.

We have the routes file describing the routes:

/* routes.js */
export const Routes = {
   Properties: 'properties'
}

We have this file, describing the contents of the command bar.

/* commandBarItems.js */

import Routes from './routes'
// IMPORTANT - CHECK OUT THE HREF PROP
const PropertiesButton = { key: Routes.Properties, name: 'Properties', href: `#${Routes.Properties}` };

export const CommandBarItems = { menu: [PropertiesButton] }

We have the app.js where you setup the hash router and the command bar component.

/* app.js */
import React, { Component } from 'react';
import { HashRouter as Router, Route } from "react-router-dom";
import { Fabric, initializeIcons, CommandBar } from 'office-ui-fabric-react';
import { PropertiesComponent } from './whichever-file-or-module';
import Routes from './routes';
import CommandBarItems from './commandBarItems';

class App extends Component {
    constructor() {
        super();
        initializeIcons();
        ...
    }

    render() {
        return (
          <div>
            <Fabric>
              <Router>
                <React.Fragment>
                  <CommandBar items={CommandBarItems.menu} farItems={CommandBarItems.farItems}/>
                  <Route path={`/${Routes.Properties}`} component={PropertiesComponent} />
                </React.Fragment>
              </Router>
             </Fabric>
            </div>
          );
     }
}

Hi Mavi. Sorry for the delay. I had some holidays. I just got back at work. you are a genius! i simply had to use the href property and the routes page! href: `#${Routes.Properties}`! Many thanks! — g00golplex, Nov 17 '20 at 19:57

Fluent UI React commandbar usestate not possible

1 Answers1