Higher Order Component example

Readme.md

Higher Order Component

App.js

import React, { Component } from "react";

import ClickCounter from "./ClickCounter";
import HoverCounter from "./HoverCounter";

class App extends Component {
  render() {
    return (
      <div>
        <ClickCounter />
        <HoverCounter />
      </div>
    );
  }
}

export default App;

ClickCounter.js

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

class ClickCounter extends Component {
  render() {
    const { count, incrementCount } = this.props;
    return (
      <div>
        <button onClick={incrementCount}>clicked {count} times</button>
      </div>
    );
  }
}

export default withCounter(ClickCounter);

HoverCounter.js

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

export class HoverCounter extends Component {
  render() {
    const { count, incrementCount } = this.props;
    return (
      <div>
        <h2 onMouseOver={incrementCount}> hovered {count} times</h2>
      </div>
    );
  }
}

export default withCounter(HoverCounter);

withCounter.js

import React from "react";

const withCounter = WrappedComponent => {
  class WithCounter extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        count: 0
      };
    }

    incrementCount = () => {
      this.setState(prevState => ({ count: prevState.count + 1 }));
    };

    render() {
      return (
        <WrappedComponent
          count={this.state.count}
          incrementCount={this.incrementCount}
        />
      );
    }
  }
  return WithCounter;
};

export default withCounter;

A higher-order component (HOC) is an advanced technique in React for reusing component logic.Concretely, a higher-order component is a function that takes a component and returns a new component.