ef3cf9bd.436f8ee9.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{124:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return l})),n.d(t,"rightToc",(function(){return i})),n.d(t,"default",(function(){return s}));var r=n(3),a=n(7),c=(n(0),n(134)),o={id:"render-callback",sidebar_label:"Render callback",title:"Render Callback",description:"Render callback | React Patterns, techniques, tips and tricks in development for Ract developer.",keywords:["render callback","reactpatterns","react patterns","reactjspatterns","reactjs patterns","react","reactjs","react techniques","react tips and tricks"],version:"Render callback",image:"/img/reactpatterns-cover.png"},l={unversionedId:"render-callback",id:"render-callback",isDocsHomePage:!1,title:"Render Callback",description:"Render callback | React Patterns, techniques, tips and tricks in development for Ract developer.",source:"@site/docs/render-callback.md",slug:"/render-callback",permalink:"/docs/render-callback",version:"current",sidebar_label:"Render callback",sidebar:"someSidebar",previous:{title:"JSX Spread Attributes",permalink:"/docs/jsx-spread-attributes"},next:{title:"Function as Child Component",permalink:"/docs/function-as-child-component"}},i=[],p={rightToc:i};function s(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(r.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"For example below, notice that we create a function ",Object(c.b)("inlineCode",{parentName:"p"},"foo")," which takes a callback function as a parameter. When we call ",Object(c.b)("inlineCode",{parentName:"p"},"foo"),", it turns around and calls back to the passed-in function."),Object(c.b)("pre",null,Object(c.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"const foo = (hello) => {\n  return hello('foo')\n}\n\nfoo((name) => {\n  return `hello from ${name}`\n})\n\n// hello from foo\n")),Object(c.b)("p",null,"As you can see, ",Object(c.b)("inlineCode",{parentName:"p"},"foo")," used the callback function to complete a portion of a string."),Object(c.b)("p",null,"In the React world, a render callback works the same way, but returning a portion of the rendered markup."))}s.isMDXComponent=!0},134:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return f}));var r=n(0),a=n.n(r);function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(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 l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},c=Object.keys(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},b=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,c=e.originalType,o=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),u=s(n),b=r,f=u["".concat(o,".").concat(b)]||u[b]||d[b]||c;return n?a.a.createElement(f,l(l({ref:t},p),{},{components:n})):a.a.createElement(f,l({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=n.length,o=new Array(c);o[0]=b;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l.mdxType="string"==typeof e?e:r,o[1]=l;for(var p=2;p<c;p++)o[p]=n[p];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"}}]);