[ ReactJs ] HOC ( https://codesandbox.io/s/hoc-kokuf )

App.js

import React from "react";
import Rahul from "./Components/Rahul";
import Rose from "./Components/Rose";

function App() {
  return (
    <div className="App">
      <Rahul camp="120" />
      <Rose camp="140" />
    </div>
  );
}

export default App;

Rahul.js

// Component/Rahul.js

import React, { Component } from "react";
import WithArms from "../Hoc/WithArms";

class Rahul extends Component {
  render() {
    return (
      <div>
        <h2>camp: {this.props.camp}</h2>
        <h3 onMouseOver={this.props.hocHandleGunShots}>
          Rahul {this.props.hocGunName} GunShots: {this.props.hocGunShots}
        </h3>
      </div>
    );
  }
}

export default WithArms(Rahul, 10);

Rose.js

// Component/Rose.js

import React, { Component } from "react";
import WithArms from "../Hoc/WithArms";

class Rose extends Component {
  render() {
    return (
      <div>
        <h2>camp: {this.props.camp}</h2>
        <h3 onMouseOver={this.props.hocHandleGunShots}>
          Rahul {this.props.hocGunName} GunShots: {this.props.hocGunShots}
        </h3>
      </div>
    );
  }
}

export default WithArms(Rose, 20);

WithArms.js

// Hoc/WithArms.js

import React, { Component } from "react";

const WithArms = (Men, shot) => {
  class newArms extends Component {
    constructor() {
      super();
      this.state = {
        gunShots: 0
      };
    }

    handleShots = () => {
      this.setState({
        gunShots: this.state.gunShots + shot
      });
    };

    render() {
      return (
        <div>
          <Men
            hocGunName="Ak47"
            hocGunShots={this.state.gunShots}
            hocHandleGunShots={this.handleShots}
            {...this.props}
          />
        </div>
      );
    }
  }
  return newArms;
};

export default WithArms;