d1a830d8.d1963560.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{115:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return c})),t.d(n,"rightToc",(function(){return s})),t.d(n,"default",(function(){return u}));var r=t(3),o=t(7),a=(t(0),t(134)),i={id:"conditional-rendering-with-enum",sidebar_label:"Conditional rendering with enum",title:"Conditional Rendering with Enum",description:"Conditional rendering with enum | React Patterns, techniques, tips and tricks in development for Ract developer.",keywords:["conditional rendering with enum","child component","reactpatterns","react patterns","reactjspatterns","reactjs patterns","react","reactjs","react techniques","react tips and tricks"],version:"Conditional rendering with enum",image:"/img/reactpatterns-cover.png"},c={unversionedId:"conditional-rendering-with-enum",id:"conditional-rendering-with-enum",isDocsHomePage:!1,title:"Conditional Rendering with Enum",description:"Conditional rendering with enum | React Patterns, techniques, tips and tricks in development for Ract developer.",source:"@site/docs/conditional-rendering-with-enum.md",slug:"/conditional-rendering-with-enum",permalink:"/docs/conditional-rendering-with-enum",version:"current",sidebar_label:"Conditional rendering with enum",sidebar:"someSidebar",previous:{title:"Switch Case Operator",permalink:"/docs/switch-case-operator"},next:{title:"Multi-level Conditional Rendering",permalink:"/docs/multi-level-conditional-rendering"}},s=[],l={rightToc:s};function u(e){var n=e.components,t=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},l,t,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"In JavaScript an object can be used as an enum when the object is used as a map of key value pairs."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"const ENUM = {\n  a: '1',\n  b: '2',\n  c: '3',\n}\n")),Object(a.b)("p",null,"An enum is a great way to have multiple conditional renderings. Let's consider the notification component again, this time we can use the enum as inlined object."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"function Notification({ text, state }) {\n  return (\n    <div>\n      {{\n        info: <Info text={text} />,\n        warning: <Warning text={text} />,\n        error: <Error text={text} />,\n      }[state]}\n    </div>\n  )\n}\n")),Object(a.b)("p",null,"The state property key helps us to retrieve the value from the object. It is much more readable compared to the switch case operator."),Object(a.b)("p",null,"In this case we had to use an inlined object, because the values of the object depend on the ",Object(a.b)("inlineCode",{parentName:"p"},"text")," property. That would be my recommended way anyway. However, if it wouldn't depend on the text property, you could use an external static enum too."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"const NOTIFICATION_STATES = {\n  info: <Info />,\n  warning: <Warning />,\n  error: <Error />,\n}\n\nfunction Notification({ state }) {\n  return (\n    <div>\n      {NOTIFICATION_STATES[state]}\n    </div>\n  )\n}\n")),Object(a.b)("p",null,"Although we could use a function to retrieve the value, if we would depend on the ",Object(a.b)("inlineCode",{parentName:"p"},"text")," property."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"const getSpecificNotification = (text) => ({\n  info: <Info text={text} />,\n  warning: <Warning text={text} />,\n  error: <Error text={text} />,\n})\n\nfunction Notification({ state, text }) {\n  return (\n    <div>\n      {getSpecificNotification(text)[state]}\n    </div>\n  )\n}\n")),Object(a.b)("p",null,"After all, the enum approach in comparison to the switch case statement is more readable. Objects as enum open up plenty of options to have multiple conditional renderings. Consider this last example to see what is possible."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"function FooBarOrFooOrBar({ isFoo, isBar }) {\n  const key = `${isFoo}-${isBar}`\n  return (\n    <div>\n      {{\n        ['true-true']: <FooBar />,\n        ['true-false']: <Foo />,\n        ['false-true']: <Bar />,\n        ['false-false']: null,\n      }[key]}\n    </div>\n  )\n}\n\nFooBarOrFooOrBar.propTypes = {\n  isFoo: React.PropTypes.boolean.isRequired,\n  isBar: React.PropTypes.boolean.isRequired,\n}\n")))}u.isMDXComponent=!0},134:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return m}));var r=t(0),o=t.n(r);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function c(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(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,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var l=o.a.createContext({}),u=function(e){var n=o.a.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},p=function(e){var n=u(e.components);return o.a.createElement(l.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},b=o.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),p=u(t),b=r,m=p["".concat(i,".").concat(b)]||p[b]||d[b]||a;return t?o.a.createElement(m,c(c({ref:n},l),{},{components:t})):o.a.createElement(m,c({ref:n},l))}));function m(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=b;var c={};for(var s in n)hasOwnProperty.call(n,s)&&(c[s]=n[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var l=2;l<a;l++)i[l]=t[l];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,t)}b.displayName="MDXCreateElement"}}]);