How to pass a function to a from a React CommandBar class to another service file.

1. PivotTiles.tsx

import MyCommandBar from '../CommandBar/CommandBar'

export default class PivotTiles extends React.Component<IPivotTilesProps, IPivotTilesState> {

  public constructor(props:IPivotTilesProps){
    super(props);
    this.state = { 
          .....
    };
          .....
    this.toggleTips = this.toggleTips.bind(this);
  }

  public render(): React.ReactElement<IPivotTilesProps> {
  
       return (<MyCommandBar 
                toggleTips= { this.toggleTips }
               /> )
    }

  public toggleTips = (item: any): void => {
    let newshowTips = this.state.showTips === 'none' ? 'yes' : 'none';
    
    this.setState({
      showTips: newshowTips,
    });
    
  } //End toggleTips  
}

2. commandbar.tsx

// AC: change to import a specific thing... while not required, the `default` keyword doens't have a benefit here
import { Utils } from './utils' //Has some functions to build up command bar commands

export default class MyCommandBar extends React.Component<ICommandBarProps, ICommandBarState> {

    constructor(props: ICommandBarProps, state: ICommandBarState) {
        super(props);
        this.state = {
        };
      }

      // HOW DO I GO FROM THIS:
      //     farItems={this.getFarItems()}
  
      // TO THIS (basically move getFarItems() function to a file called utils.ts )
      //     farItems={Utils.getFarItems()}
  
    public render(): JSX.Element {
        // AC: don't need this line... you don't need an instance of Utils if it doens't contain data
        // const _utils = new Utils();
    
        // AC: change to use the static function... no need to create an instance
        let farItems = Utils.getFarItems();
        //  Also tried this and changing getFarItems to receive it and put into onClick but it did not work.
        //  let farItems = _utils.getFarItems(this.props.toggleTips());
    
        return (
          <div className={styles.container}>
            <CommandBar 
              items={Utils.getMainItems()}
              farItems={ farItems }
            />
          </div>
        );
      }

      //This function works when it's in the commandbar.tsx file but not when I move it to utils.ts
      private getFarItems___WANT_TO_MOVE_TO_Utils_ts() {
        return [
          {
            key: 'mini',
            name: '',
            ariaLabel: 'Minimize',
            iconProps: { iconName: 'ChromeMinimize' },
            onClick: () => console.log()
          },
          {
            key: 'tips',
            name: '',
            ariaLabel: 'Tips',
            iconProps: { iconName: 'Help' },
            onClick: () => this.props.toggleTips()
          },
        ]
      }
  }

3. utils.ts

export class Utils {

    //What is correct syntax for setting up this function?
    //    I need to be able to call WhatDoIPutHere.toggleTips() where toggleTips is a function on main webpart class.
    //    public getItemsExamplex = () => {
    //    public getItemsExamplex = (do I need to get the this from the webpart here?) => {
    
    //AC: change this to a staic
    public static getFarItems() {
      //I want to get the this.props.toggleTips() from MyCommandBar class which called it
      return [
        {
          key: 'mini',
          name: '',
          ariaLabel: 'Minimize',
          iconProps: {
            iconName: 'ChromeMinimize'
          },
          onClick: () => console.log()
        },
        {
          key: 'tips',
          name: '',
          ariaLabel: 'Tips',
          iconProps: {
            iconName: 'Help'
          },
          onClick: () => WhatDoIPutHere.toggleTips()
        },
      ]
    }
}

This worked! I only had to make the following small tweaks:

File 2, line 23: I had to pass my callback functions down (I actually had 2 in my final version: toggleTips and minimizeTiles)
let farItems = Utils.getFarItems(this.props.toggleTips, this.props.minimizeTiles);

File 3, line 9: I had to add the callback functions in
public static getFarItems(toggleTips,minimize) {

File 3, line 19 & 28: I had to replace on click with callback functions.
onClick: () => minimize()
onClick: () => toggleTips()