3a77b784.13b9025d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{134:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return b}));var r=n(0),a=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 i(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?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(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)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=l(n),m=r,b=u["".concat(i,".").concat(m)]||u[m]||d[m]||o;return n?a.a.createElement(b,c(c({ref:t},s),{},{components:n})):a.a.createElement(b,c({ref:t},s))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var s=2;s<o;s++)i[s]=n[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},82:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return l}));var r=n(3),a=n(7),o=(n(0),n(134)),i={id:"ternary-operation",sidebar_label:"Ternary operation",title:"Ternary Operation",description:"Ternary operation | React Patterns, techniques, tips and tricks in development for Ract developer.",keywords:["ternary operation","react ternary operation","reactpatterns","react patterns","reactjspatterns","reactjs patterns","react","reactjs","react techniques","react tips and tricks"],version:"Ternary operation",image:"/img/reactpatterns-cover.png"},c={unversionedId:"ternary-operation",id:"ternary-operation",isDocsHomePage:!1,title:"Ternary Operation",description:"Ternary operation | React Patterns, techniques, tips and tricks in development for Ract developer.",source:"@site/docs/ternary-operation.md",slug:"/ternary-operation",permalink:"/docs/ternary-operation",version:"current",sidebar_label:"Ternary operation",sidebar:"someSidebar",previous:{title:"If Else",permalink:"/docs/if-else"},next:{title:"Logical && Operator",permalink:"/docs/logical-and-operator"}},p=[{value:"Syntax",id:"syntax",children:[]},{value:"For example",id:"for-example",children:[]}],s={rightToc:p};function l(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},s,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("h2",{id:"syntax"},"Syntax"),Object(o.b)("p",null,"You can make your ",Object(o.b)("inlineCode",{parentName:"p"},"if-else")," statement more concise by using a ternary operation."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"condition ? expr1 : expr2\n")),Object(o.b)("h2",{id:"for-example"},"For example"),Object(o.b)("p",null,"Imagine you have a toggle to switch between two modes, edit and view, in your component. The derived condition is a simple boolean. You can use the boolean to decide which element you want to return."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"function Item({ item, mode }) {\n  const isEditMode = mode === 'EDIT'\n\n  return (\n    <div>\n      { isEditMode\n          ? <ItemEdit item={item} />\n          : <ItemView item={item} />\n      }\n    </div>\n  )\n}\n")),Object(o.b)("p",null,"If your blocks in both branches of the ternary operation are getting bigger, you can use parentheses."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"function Item({ item, mode }) {\n  const isEditMode = mode === 'EDIT'\n\n  return (\n    <div>\n    { isEditMode ? \n      (\n        <ItemEdit item={item} />\n      ) : \n      (\n        <ItemView item={item} />\n      )\n    }\n    </div>\n  );\n}\n")),Object(o.b)("p",null,"The ternary operation makes the conditional rendering in React more concise than the ",Object(o.b)("inlineCode",{parentName:"p"},"if-else")," statement. It is simple to inline it in your return statement."))}l.isMDXComponent=!0}}]);