37f4f3bd.39d75218.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{134:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return m}));var r=n(0),i=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),p=function(e){var t=i.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=p(e.components);return i.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},d=i.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,a=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),u=p(n),d=r,m=u["".concat(a,".").concat(d)]||u[d]||f[d]||o;return n?i.a.createElement(m,c(c({ref:t},l),{},{components:n})):i.a.createElement(m,c({ref:t},l))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,a=new Array(o);a[0]=d;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,a[1]=c;for(var l=2;l<o;l++)a[l]=n[l];return i.a.createElement.apply(null,a)}return i.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},79:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return a})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return p}));var r=n(3),i=n(7),o=(n(0),n(134)),a={id:"if-else",sidebar_label:"If else",title:"If Else",description:"If else | React Patterns, techniques, tips and tricks in development for Ract developer.",keywords:["if else","react conditional rendering","reactpatterns","react patterns","reactjspatterns","reactjs patterns","react","reactjs","react techniques","react tips and tricks"],version:"If else",image:"/img/reactpatterns-cover.png"},c={unversionedId:"if-else",id:"if-else",isDocsHomePage:!1,title:"If Else",description:"If else | React Patterns, techniques, tips and tricks in development for Ract developer.",source:"@site/docs/if-else.md",slug:"/if-else",permalink:"/docs/if-else",version:"current",sidebar_label:"If else",sidebar:"someSidebar",previous:{title:"Component Injection",permalink:"/docs/component-injection"},next:{title:"Ternary Operation",permalink:"/docs/ternary-operation"}},s=[],l={rightToc:s};function p(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},l,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"The easiest way to have a conditional rendering is to use an ",Object(o.b)("inlineCode",{parentName:"p"},"if-else")," in React render method."),Object(o.b)("p",null,"Imagine you don't want to render your component, because it doesn't have the necessary props. For instance, a ",Object(o.b)("inlineCode",{parentName:"p"},"List")," component shouldn't render the list when there is no list of items. You can use an if statement to return earlier from the render lifecycle."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"function List({ list }) {\n  if (!list) {\n    return null\n  }\n\n  return (\n    <div>\n      {list.map(item => <ListItem item={item} />)}\n    </div>\n  )\n}\n")),Object(o.b)("p",null,"A component that returns null will render nothing. However, you might want to show a text when a list is empty to give your app user some feedback for a better user experience."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"function List({ list }) {\n  if (!list) {\n    return null\n  }\n\n  if (!list.length) {\n    return <p>Sorry, the list is empty.</p>\n  } else {\n    return (\n      <div>\n        {list.map(item => <ListItem item={item} />)}\n      </div>\n    )\n  }\n}\n")),Object(o.b)("p",null,"The List renders either nothing, a text or the list of items. The ",Object(o.b)("inlineCode",{parentName:"p"},"if-else")," statement is the most basic option to have a conditional rendering in React."))}p.isMDXComponent=!0}}]);