Conditionals in JSX

Instead of

  1. const sampleComponent = () => {
  2.   return isTrue ? <p>True!</p> : null
  3. };

Use short-circuit evaluation

  1. const sampleComponent = () => {
  2.   return isTrue && <p>True!</p>
  3. };

For Complex scenarios with too many ternaries:

  1. // Y soo many ternary??? :-/
  2. const sampleComponent = () => {
  3.   return (
  4.     <div>
  5.       {flag && flag2 && !flag3
  6.         ? flag4
  7.         ? <p>Blah</p>
  8.         : flag5
  9.         ? <p>Meh</p>
  10.         : <p>Herp</p>
  11.         : <p>Derp</p>
  12.       }
  13.     </div>
  14.   )
  15. };
  • Best approach: Move logic to sub-components
  • Alternate hacky approach: Use IIFE

There are some libraries that solve this problem (JSX-Control Statements), but rather than introduce another dependency
use an IIFE and return values by using if-else statement inside

  1. const sampleComponent = () => {
  2.   return (
  3.     <div>
  4.       {
  5.         (() => {
  6.           if (flag && flag2 && !flag3) {
  7.             if (flag4) {
  8.               return <p>Blah</p>
  9.             } else if (flag5) {
  10.               return <p>Meh</p>
  11.             } else {
  12.               return <p>Herp</p>
  13.             }
  14.           } else {
  15.             return <p>Derp</p>
  16.           }
  17.         })()
  18.       }
  19.     </div>
  20.   )
  21. };

With an appropiate transpiler you can take advantage of the upcoming do expression which is currently on stage-1

  1. const sampleComponent = () => {
  2.   return (
  3.     <div>
  4.       {
  5.         do => {
  6.           if (flag && flag2 && !flag3) {
  7.             if (flag4) {
  8.               <p>Blah</p>
  9.             } else if (flag5) {
  10.               <p>Meh</p>
  11.             } else {
  12.               <p>Herp</p>
  13.             }
  14.           } else {
  15.             <p>Derp</p>
  16.           }
  17.         }
  18.       }
  19.     </div>
  20.   )
  21. };

Or alternatively simply use early returns

  1. const sampleComponent = () => {
  2.   const basicCondition = flag && flag2 && !flag3;
  3.   if (!basicCondition) return <p>Derp</p>;
  4.   if (flag4) return <p>Blah</p>;
  5.   if (flag5) return <p>Meh</p>;
  6.   return <p>Herp</p>
  7. }

Related links: