fd9d0957.c8296a27.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[63],{129:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return c})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return s})),t.d(n,"default",(function(){return p}));var a=t(3),o=t(7),r=(t(0),t(134)),c={id:"function-as-child-component",sidebar_label:"Function as child component",title:"Function as Child Component",description:"Function as child component | React Patterns, techniques, tips and tricks in development for Ract developer.",keywords:["function as child component","child component","reactpatterns","react patterns","reactjspatterns","reactjs patterns","react","reactjs","react techniques","react tips and tricks"],version:"Function as child component",image:"/img/reactpatterns-cover.png"},i={unversionedId:"function-as-child-component",id:"function-as-child-component",isDocsHomePage:!1,title:"Function as Child Component",description:"Function as child component | React Patterns, techniques, tips and tricks in development for Ract developer.",source:"@site/docs/function-as-child-component.md",slug:"/function-as-child-component",permalink:"/docs/function-as-child-component",version:"current",sidebar_label:"Function as child component",sidebar:"someSidebar",previous:{title:"Render Callback",permalink:"/docs/render-callback"},next:{title:"Function as Prop Component",permalink:"/docs/function-as-prop-component"}},s=[{value:"What is Function as Child Component?",id:"what-is-function-as-child-component",children:[]},{value:"Usage",id:"usage",children:[]},{value:"For examples",id:"for-examples",children:[]}],l={rightToc:s};function p(e){var n=e.components,t=Object(o.a)(e,["components"]);return Object(r.b)("wrapper",Object(a.a)({},l,t,{components:n,mdxType:"MDXLayout"}),Object(r.b)("h2",{id:"what-is-function-as-child-component"},"What is Function as Child Component?"),Object(r.b)("p",null,"A Function as child component is a pattern that lets you pass a render function to a component as the children prop so you can change what you can pass as children to a component."),Object(r.b)("h2",{id:"usage"},"Usage"),Object(r.b)("p",null,"When you use a Function as child component, instead of passing JSX markup, you assign children as a function."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"<Foo>\n  {(name) => <div>`hello from ${name}`</div>}\n</Foo>\n")),Object(r.b)("p",null,"And the ",Object(r.b)("inlineCode",{parentName:"p"},"Foo")," component would look something like this."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"const Foo = ({ children }) => {\n  return children('foo')\n}\n")),Object(r.b)("h2",{id:"for-examples"},"For examples"),Object(r.b)("p",null,"Let take a look at a advanced example of a Function as child component."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"import React from 'react'\n\nclass PageWidth extends React.Component {\n  state = { width: 0 }\n\n  componentDidMount() {\n    this.setState({ width: window.innerWidth })\n\n    window.addEventListener(\n      'resize',\n      ({ target }) => {\n        this.setState({ width: target.innerWidth })\n      }\n    )\n  }\n\n  render() {\n    const { width } = this.state\n\n    return this.props.children(width)\n  }\n}\n")),Object(r.b)("p",null,"And then you could use it as."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"<PageWidth>\n  {width => <div>Page width is {width}</div>}\n</PageWidth>\n")),Object(r.b)("p",null,'As you can see above, children is "overloaded" and passed to ',Object(r.b)("inlineCode",{parentName:"p"},"PageWidth")," as a function instead of being a ",Object(r.b)("inlineCode",{parentName:"p"},"ReactNodeList")," as nature intended. The ",Object(r.b)("inlineCode",{parentName:"p"},"PageWidth")," component's render method calls ",Object(r.b)("inlineCode",{parentName:"p"},"this.props.children")," (passing it width), which returns rendered JSX."),Object(r.b)("p",null,"The real power of ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"/docs/render-callback"}),"render callbacks")," can be seen in this example. ",Object(r.b)("inlineCode",{parentName:"p"},"PageWidth")," will do all of the heavy lifting, while exactly what is rendered can change, depending on the render function that is passed."))}p.isMDXComponent=!0},134:function(e,n,t){"use strict";t.d(n,"a",(function(){return d})),t.d(n,"b",(function(){return m}));var a=t(0),o=t.n(a);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function c(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?c(Object(t),!0).forEach((function(n){r(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,a,o=function(e,n){if(null==e)return{};var t,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var l=o.a.createContext({}),p=function(e){var n=o.a.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},d=function(e){var n=p(e.components);return o.a.createElement(l.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},h=o.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,r=e.originalType,c=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),d=p(t),h=a,m=d["".concat(c,".").concat(h)]||d[h]||u[h]||r;return t?o.a.createElement(m,i(i({ref:n},l),{},{components:t})):o.a.createElement(m,i({ref:n},l))}));function m(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var r=t.length,c=new Array(r);c[0]=h;var i={};for(var s in n)hasOwnProperty.call(n,s)&&(i[s]=n[s]);i.originalType=e,i.mdxType="string"==typeof e?e:a,c[1]=i;for(var l=2;l<r;l++)c[l]=t[l];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,t)}h.displayName="MDXCreateElement"}}]);