50718b0f.7da4e889.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{134:function(e,n,t){"use strict";t.d(n,"a",(function(){return u})),t.d(n,"b",(function(){return v}));var i=t(0),r=t.n(i);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function l(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);n&&(i=i.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,i)}return t}function a(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?l(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function c(e,n){if(null==e)return{};var t,i,r=function(e,n){if(null==e)return{};var t,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)t=o[i],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)t=o[i],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var s=r.a.createContext({}),d=function(e){var n=r.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):a(a({},n),e)),t},u=function(e){var n=d(e.components);return r.a.createElement(s.Provider,{value:n},e.children)},p={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},m=r.a.forwardRef((function(e,n){var t=e.components,i=e.mdxType,o=e.originalType,l=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=d(t),m=i,v=u["".concat(l,".").concat(m)]||u[m]||p[m]||o;return t?r.a.createElement(v,a(a({ref:n},s),{},{components:t})):r.a.createElement(v,a({ref:n},s))}));function v(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var o=t.length,l=new Array(o);l[0]=m;var a={};for(var c in n)hasOwnProperty.call(n,c)&&(a[c]=n[c]);a.originalType=e,a.mdxType="string"==typeof e?e:i,l[1]=a;for(var s=2;s<o;s++)l[s]=t[s];return r.a.createElement.apply(null,l)}return r.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},84:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return l})),t.d(n,"metadata",(function(){return a})),t.d(n,"rightToc",(function(){return c})),t.d(n,"default",(function(){return d}));var i=t(3),r=t(7),o=(t(0),t(134)),l={id:"multi-level-conditional-rendering",sidebar_label:"Multi-level conditional rendering",title:"Multi-level Conditional Rendering",description:"Multi-level conditional rendering, techniques, tips and tricks in development for Ract developer.",keywords:["multi-level conditional rendering","reactpatterns","react patterns","reactjspatterns","reactjs patterns","react","reactjs","react techniques","react tips and tricks"],version:"Multi-level conditional rendering",image:"/img/reactpatterns-cover.png"},a={unversionedId:"multi-level-conditional-rendering",id:"multi-level-conditional-rendering",isDocsHomePage:!1,title:"Multi-level Conditional Rendering",description:"Multi-level conditional rendering, techniques, tips and tricks in development for Ract developer.",source:"@site/docs/multi-level-conditional-rendering.md",slug:"/multi-level-conditional-rendering",permalink:"/docs/multi-level-conditional-rendering",version:"current",sidebar_label:"Multi-level conditional rendering",sidebar:"someSidebar",previous:{title:"Conditional Rendering with Enum",permalink:"/docs/conditional-rendering-with-enum"},next:{title:"With Higher Order Component",permalink:"/docs/with-higher-order-component"}},c=[],s={rightToc:c};function d(e){var n=e.components,t=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(i.a)({},s,t,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"What about nested conditional renderings? Let's have a look at the ",Object(o.b)("inlineCode",{parentName:"p"},"List")," component that can either show a list, an empty text or nothing."),Object(o.b)("pre",null,Object(o.b)("code",Object(i.a)({parentName:"pre"},{className:"language-jsx"}),"function List({ list }) {\n  const isNull = !list\n  const isEmpty = !isNull && !list.length\n\n  return (\n    <div>\n      { isNull\n          ? null\n          : ( isEmpty\n              ? <p>Sorry, the list is empty.</p>\n              : <div>{list.map(item => <ListItem item={item} />)}</div>\n            )\n      }\n    </div>\n  )\n}\n\n// usage\n<List list={null} /> // <div></div>\n<List list={[]} /> // <div><p>Sorry, the list is empty.</p></div>\n<List list={['a', 'b', 'c']} /> // <div><div>a</div><div>b</div><div>c</div><div>\n")),Object(o.b)("p",null,"It works, however I would recommend to keep the nested conditional renderings to a minimum, it makes it less readable, my recommendation would be to split it up into smaller components which themselves have conditional renderings."),Object(o.b)("pre",null,Object(o.b)("code",Object(i.a)({parentName:"pre"},{className:"language-jsx"}),"function List({ list }) {\n  const isList = list && list.length\n\n  return (\n    <div>\n      { isList\n          ? <div>{list.map(item => <ListItem item={item} />)}</div>\n          : <NoList isNull={!list} isEmpty={list && !list.length} />\n      }\n    </div>\n  )\n}\n\nfunction NoList({ isNull, isEmpty }) {\n  return (!isNull && isEmpty) && <p>Sorry, the list is empty.</p>\n}\n")))}d.isMDXComponent=!0}}]);