Conditionals in JSX

    Use short-circuit evaluation

    2.   return isTrue && <p>True!</p>
    3. };
    • 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 (flag4) {
    8.             } else if (flag5) {
    9.               return <p>Meh</p>
    10.             } else {
    11.               return <p>Herp</p>
    12.             }
    13.           } else {
    14.             return <p>Derp</p>
    15.           }
    16.         })()
    17.     </div>
    18.   )
    19. };

    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>