Hoc in react js

Higher Order Component in React JS
When 2 or more components have same kind of functionality with same handlers event and same html generation,
Like Manoj.js and Chhavi.js
Chhavi.js
import React from "react";
class Manoj extends React.Component {
state={
  gunshots:0
}
handleGunshot=()=>
{
  this.setState({gunshots:this.state.gunshots+1})
}
  render() {
  return (<div>
    <h3 onMouseOver={this.handleGunshot}>Manoj Gunshots {this.state.gunshots}</h3></div>)
}
}

export default Manoj;

Manoj.js
import React from "react";
class Manoj extends React.Component {
state={
  gunshots:0
}
handleGunshot=()=>
{
  this.setState({gunshots:this.state.gunshots+1})
}
  render() {
  return (<div>
    <h3 onMouseOver={this.handleGunshot}>Chhavi Gunshots {this.state.gunshots}</h3></div>)
}
}

export default Manoj;

In App.js
import React from "react";
import Manoj from "./Manoj";
import Chhavi from "./Chhavi";
class App extends React.Component {
  render() {
    return (
      <div>
        <Manoj />
        <Chhavi />
      </div>
    );
  }
}

export default App;

Now above code show same o/p n same logic, so we can make one, hoc always take one compoenent and return a new  component
Hoc.js
import React, { Component } from "react";
const Army = Men => {
  class NewMen extends Component {
    state = {
      gunshots: 0
    };
    handleGunshot = () => {
      this.setState({ gunshots: this.state.gunshots + 1 });
    };
    render() {
      return (
        <Men
          hocgunname="AK47"
          hocGunshots={this.state.gunshots}
          hocHandleGunShot={this.handleGunshot}
        />
      );
    }
  }
  return NewMen;
};

export default Army;

Manoj.js
import React from "react";
import Army from "./Hoc";
class Manoj extends React.Component {
  render() {
    return (
      <div>
        <h3 onMouseOver={this.props.hocHandleGunShot}>
          Manoj Gunshots {this.props.hocgunname}
          {this.props.hocGunshots}
        </h3>
      </div>
    );
  }
}

export default Army(Manoj);

Chhavi.js
import React from "react";
import Army from "./Hoc";
class Chhavi extends React.Component {
  render() {
    return (
      <div>
        <h3 onMouseOver={this.props.hocHandleGunShot}>
          Chhavi Gunshots {this.props.hocgunname}
          {this.props.hocGunshots}
        </h3>
      </div>
    );
  }
}

export default Army(Chhavi);

Now we will add more info to component like manoj will fire 20 one time and chhavi 10
Chhavi.js
import React from "react";
import Army from "./Hoc";
class Chhavi extends React.Component {
  render() {
    return (
      <div>
        <h3 onMouseOver={this.props.hocHandleGunShot}>
          Chhavi Gunshots {this.props.hocgunname}
          {this.props.hocGunshots}
        </h3>
      </div>
    );
  }
}

export default Army(Chhavi,20);

Manoj.js
import React from "react";
import Army from "./Hoc";
class Manoj extends React.Component {
  render() {
    return (
      <div>
        <h3 onMouseOver={this.props.hocHandleGunShot}>
          Manoj Gunshots {this.props.hocgunname}
          {this.props.hocGunshots}
        </h3>
      </div>
    );
  }
}

export default Army(Manoj,10);

Hoc.js
import React, { Component } from "react";
const Army = (Men,shot) => {
  class NewMen extends Component {
    state = {
      gunshots: 0
    };
    handleGunshot = () => {
      this.setState({ gunshots: this.state.gunshots + shot });
    };
    render() {
      return (
        <Men
          hocgunname="AK47"
          hocGunshots={this.state.gunshots}
          hocHandleGunShot={this.handleGunshot}
        />
      );
    }
  }
  return NewMen;
};

export default Army;