HigherOrderComponent.js

const initialState = {
  numberOfPeople: 10,
  slicesPerPerson: 2,
};

//We then use this HOC like so: WithCalculator(**component goes here**)
//This makes use of arrow functions(=>) and anonymous class construction(returns `class`)
const WithCalculator = WrappedComponent => {
  return class extends Component {
    static displayName = `WithCalculator(${WrappedComponent.displayName ||
      WrappedComponent.name})`;

    state = { ...initialState };

    updateNumberOfPeople = event => {
      const numberOfPeople = parseInt(event.target.value, 10);
      this.setState({ numberOfPeople });
    };

    updateSlicesPerPerson = event => {
      const slicesPerPerson = parseInt(event.target.value, 10);
      this.setState({ slicesPerPerson });
    };

    reset = event => {
      this.setState({ ...initialState });
    };

    render() {
      const { numberOfPeople, slicesPerPerson } = this.state;
      const numberOfPizzas = calculatePizzasNeeded(
        numberOfPeople,
        slicesPerPerson,
      );

      return (
        <WrappedComponent
          numberOfPeople={numberOfPeople}
          slicesPerPerson={slicesPerPerson}
          numberOfPizzas={numberOfPizzas}
          updateNumberOfPeople={this.updateNumberOfPeople}
          updateSlicesPerPerson={this.updateSlicesPerPerson}
        />
      );
    }
  };
};

HigherOrderComponent_AnonymousClass_StaticDisplayname.js

const WithCalculator = WrappedComponent => {
  return class extends Component {
    static displayName = `WithCalculator(${WrappedComponent.displayName ||
      WrappedComponent.name})`;

    state = { ...initialState };

    updateNumberOfPeople = event => {
      const numberOfPeople = parseInt(event.target.value, 10);
      this.setState({ numberOfPeople });
    };

    updateSlicesPerPerson = event => {
      const slicesPerPerson = parseInt(event.target.value, 10);
      this.setState({ slicesPerPerson });
    };

    reset = event => {
      this.setState({ ...initialState });
    };

    render() {
      const { numberOfPeople, slicesPerPerson } = this.state;
      const numberOfPizzas = calculatePizzasNeeded(
        numberOfPeople,
        slicesPerPerson,
      );

      return (
        <WrappedComponent
          numberOfPeople={numberOfPeople}
          slicesPerPerson={slicesPerPerson}
          numberOfPizzas={numberOfPizzas}
          updateNumberOfPeople={this.updateNumberOfPeople}
          updateSlicesPerPerson={this.updateSlicesPerPerson}
        />
      );
    }
  };
};

HigherOrderComponent_Normal.js

//normal cons

function test (){
    
    
}