🚀 Higher Order Component

Higher Order Component

README.md

@@ -219,3 +219,22 @@ export default ClassClick;
 ### [Forwarding Refs](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/9a57ffbe3d6eeea400c3604bc66fe6bb6bafabdd)
 
 ### [Portals](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/89a9384c40963c77ec47ac76cbd8699ee1bebe4d)
+
+### [Error Boundary](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/83c11fa8ef5b3c7cf3a0a71495993ea9fed97053)
+
+### [Higher Order Component]()
+
+```jsx
+import React from "react";
+
+const UpdatedComponent = (OriginalComponent) => {
+  class NewComponent extends React.Component {
+    render() {
+      return <OriginalComponent />;
+    }
+  }
+  return NewComponent;
+};
+
+export default UpdatedComponent;
+```

src/App.js

@@ -24,19 +24,23 @@ import FRParentInput from "./components/FRParentInput";
 import PortalDemo from "./components/PortalDemo";
 import Hero from "./components/Hero";
 import ErrorBoundary from "./components/ErrorBoundary";
+import ClickCounter from "./components/ClickCounter";
+import HoverCounter from "./components/HoverCounter";
 
 function App() {
   return (
     <div className="App">
-      <ErrorBoundary>
+      <ClickCounter name="Saish" />
+      <HoverCounter name="Pratik" />
+      {/* <ErrorBoundary>
         <Hero heroName="Superman" />
       </ErrorBoundary>
       <ErrorBoundary>
         <Hero heroName="Batman" />
       </ErrorBoundary>
       <ErrorBoundary>
         <Hero heroName="Joker" />
-      </ErrorBoundary>
+      </ErrorBoundary> */}
       {/* <PortalDemo /> */}
       {/* <FRParentInput /> */}
       {/* <FocusInput /> */}

src/components/ClickCounter.js

@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+import withCounter from "./withCounter";
+
+class ClickCounter extends Component {
+  render() {
+    const { count, incrementCount, name } = this.props;
+    return (
+      <div>
+        <button onClick={incrementCount}>
+          {name} Clicked {count} times
+        </button>
+      </div>
+    );
+  }
+}
+
+export default withCounter(ClickCounter, 5);

src/components/HoverCounter.js

@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+import withCounter from "./withCounter";
+
+class HoverCounter extends Component {
+  render() {
+    const { count, incrementCount, name } = this.props;
+    return (
+      <div>
+        <h1 onMouseOver={incrementCount}>
+          {name} Hover {count} times
+        </h1>
+      </div>
+    );
+  }
+}
+
+export default withCounter(HoverCounter, 10);

src/components/withCounter.js

@@ -0,0 +1,37 @@
+import React from "react";
+
+const withCounter = (WrappedComponent, incrementNumber) => {
+  class WithCounter extends React.Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        count: 0,
+      };
+    }
+
+    incrementCount = () => {
+      this.setState((prevState) => {
+        return { count: prevState.count + incrementNumber };
+      });
+    };
+
+    render() {
+      return (
+        <WrappedComponent
+          count={this.state.count}
+          incrementCount={this.incrementCount}
+          {...this.props}
+        />
+      );
+    }
+  }
+  return WithCounter;
+};
+
+export default withCounter;
+
+/*
+To share common functionality between components.
+A Higher Order Components (HOC) pattern where a function takes a component as an argument and returns a new component. 
+*/