A HOC proposal for injecting tracking of events.

component.js

import React from 'react';
import withTracking from 'withTracking';

export class MyLink extends React.Component {
  static propTypes = {
    text: PropTypes.string,
    href: PropTypes.string,
    track: PropTypes.func,
  };

  onClick() {
    this.props.track('w/web/mylink/clicked');
  }

  render() {
    return <a href={this.props.href} onclick={this.onClick}>{this.props.text}</a>
  }
}

export default withTracking(MyLink);

track.js

function trackEvent(eventName, businessId, countryName) {
  // Build and send XHR event to Amplitude
}

withTracking.js

import { connect } from 'react-redux';
import trackEvent from 'track';

// HOC: Wraps a component and injects a `track` prop for callback.
export default function withTracking(WrappedComponent) {
  const Tracker = class extends React.Component {
    track(eventName) {
      
      // Gracefully handle things if the store doesn't exist.
      // This could happen if we're testing a React tree without using redux or a mockStore in the test.
      const businessId = this.props.store ? this.props.store.get('businessId') : undefined;
      const countryName = this.props.store ? this.props.store.get('countryName') : undefined;
      
      // Defer to the "trackEvent" for actually sending the event.
      trackEvent(eventName, businessId, countryName);
    }
    
    render() {
      return <WrappedComponent track={this.track} {...this.props} />;
    }
  };
  return connect()(Tracker);
}