Higher-order Components

Enhance.js

import { Component } from "React";

export var Enhance = (ComposedComponent, ajaxCall) => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    ajaxCall()
    .then(function(data) {
      this.setState({ data: data });
    });
  }
  render() {
    return <ComposedComponent {...this.props} data={this.state.data} />;
  }
};

HigherOrderComponent.js

import { Enhance } from "./Enhance";
var API_URL = 'abc.com';

function request1() {
  return request.get(API_URL + '/someData');
}

function request2() {
  return request.get(API_URL + '/someOtherData');
}

class MyComponent {
  render() {
    if (!this.data) return <div>Waiting...</div>;
    return <div>{this.data}</div>;
  }
}

export const SituationOne = Enhance(MyComponent, request1); // Enhanced component
export const SituationTwo = Enhance(MyComponent, request2); // Enhanced component