How to call a function from an imported component in another file in React + Typescript?

Question

I'm currently trying to hook up a button in my homepage to go to another link, and I want to make use of some functions from another file. Currently, the functions I want to use are in a SettingsMenu.tsx file and the component looks like this:

export class SettingsMenu extends Component<
  SettingsMenuProps,
  SettingsMenuState
> {
  constructor(props: SettingsMenuProps) {
    //Lots of code 
  }

  gotoExternalLink = (e: React.MouseEvent, url: string) => {
    window.open(url, '_blank', 'noopener noreferrer');
    this.hideSettingsMenu(e);
  };


//More code 

}

And in my homepage, I've already done import SettingsMenu from './SettingsMenu' and attempted to hook up my button wiith the gotoExternalLink function, which I'm having difficulty doing. I have tried the following:

Button variant="contained" className="support-button" 
          onClick={gotoExternalLink(e,"https://app.clovergive.com/App/Form/c226e457-5e64-4f75-8cbb-e8cba99138f4" )}>
          Support Us
        </Button>

Can anyone provide some support or help?

Answer 1

Standing at one component and calling a method from another component is not the way React data flow works.

If you simply want to go to external link, you could extract that logic into a utils file and call it in each event handler.

//in utils.ts
export const goToExternalLinkUtil = (url: string) => {
  window.open(url, '_blank', 'noopener noreferrer');
}

// in HomePage.tsx
<Button variant="contained" 
    className="support-button" 
    onClick={() => { gotoExternalLinkUtil("https://app.clovergive.com/App/Form/c226e457-5e64-4f75-8cbb-e8cba99138f4");}
 >
   Support Us
 </Button>

In case you would like to go to extarnal link and then hide the setting menu, you might want to lift up the state of isSettingMenuOpen to the nearest ancestor of SettingMenu and Homepage .

Another suggestion is using Redux to manage all the state in one centralized place.