7ba5bb7c.e860406b.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{134:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return b}));var r=n(0),o=n.n(r);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=o.a.createContext({}),s=function(e){var t=o.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=s(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,b=u["".concat(c,".").concat(d)]||u[d]||m[d]||a;return n?o.a.createElement(b,i(i({ref:t},l),{},{components:n})):o.a.createElement(b,i({ref:t},l))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,c=new Array(a);c[0]=d;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var l=2;l<a;l++)c[l]=n[l];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},95:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return s}));var r=n(3),o=n(7),a=(n(0),n(134)),c={id:"higher-order-component",sidebar_label:"Higher-Order component",title:"Higher-Order Component",description:"Higher-Order component | React Patterns, techniques, tips and tricks in development for Ract developer.",keywords:["higher-order component","higher order component","reactpatterns","react patterns","reactjspatterns","reactjs patterns","react","reactjs","react techniques","react tips and tricks"],version:"Higher-Order components",image:"/img/reactpatterns-cover.png"},i={unversionedId:"higher-order-component",id:"higher-order-component",isDocsHomePage:!1,title:"Higher-Order Component",description:"Higher-Order component | React Patterns, techniques, tips and tricks in development for Ract developer.",source:"@site/docs/higher-order-component.md",slug:"/higher-order-component",permalink:"/docs/higher-order-component",version:"current",sidebar_label:"Higher-Order component",sidebar:"someSidebar",previous:{title:"Higher-Order Function",permalink:"/docs/higher-order-function"},next:{title:"Accessing a Child Component",permalink:"/docs/accessing-a-child-component"}},p=[{value:"What is Higher-Order Component?",id:"what-is-higher-order-component",children:[]},{value:"For examples",id:"for-examples",children:[]}],l={rightToc:p};function s(e){var t=e.components,n=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},l,n,{components:t,mdxType:"MDXLayout"}),Object(a.b)("h2",{id:"what-is-higher-order-component"},"What is Higher-Order Component?"),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},"Higher-Order Components in ReactJS is similar to Higher-Order Functions."),Object(a.b)("li",{parentName:"ul"},"A higher-order component is a function that takes a component and returns a new component."),Object(a.b)("li",{parentName:"ul"},"A higher-order component transforms a component into another component.")),Object(a.b)("h2",{id:"for-examples"},"For examples"),Object(a.b)("p",null,"Let's create a HOC that returns the component unaltered."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"const withElement = Element => () => <Element />\n")),Object(a.b)("p",null,"Let's make this a little bit more useful by adding the property and the color to that element."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),'const withColor = Element => props => <Element {...props} color="red" />\n')),Object(a.b)("p",null,"Then we use this HOC (withColor) in a component."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"const Button = () => {\n  return <button>My Button</button>\n}\n\nconst ColoredButton = withColor(Button)\n")),Object(a.b)("p",null,"Then we can finally render the ColoredButton component in our app."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"function App() {\n  return (\n    <ColoredButton />\n  )\n}\n")))}s.isMDXComponent=!0}}]);