I'm new to React/Typescript/SPFx and I am using the React CommandBar component in my SPFx webpart. The CommandBar needs the commands defined in an array called farItems[]. The items array has the properties of each command including one that is the onClick method. In my case, the onClick method is passed down to my CommandBar.tsx file through it's props.
I can build the "farItems" array in the same tsx file as the CommandBar component including the onClick method from the parent class. But I want to move the "building farItems array" process to a separate file to make it more reusable.
I summarized the current code state in this gist
toggleTips is the function I have on the main react component (PivotTiles.tsx) to change the state. I'm passing the function down to CommandBar.tsx through it's props and so if I build the items array in that file, all is well. But i want to be able to import the farItems[] from another file.
I am hoping to be able to build the farItems[] array in another file so it's more reusable.
With my current state of the code, I do have everything working in a separate file as long as I only try adding something like console.log() in the onClick. My hurdle is passing down the function from the parent to change the state and getting the syntax/logic correct.
Thanks
