Conditional in JSX

Instead of

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

Use short-circuit evaluation

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

For Complex scenarios with too many ternaries:

// Y soo many ternary??? :-/
const sampleComponent = () => {
  return (
    <div>
      {flag && flag2 && !flag3
        ? flag4
        ? <p>Lorem</p>
        : flag5
        ? <p>Ipsum</p>
        : <p>Dolor</p>
        : <p>Sit Amet</p>
      }
    </div>
  )
};

• 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

const sampleComponent = () => {
  return (
    <div>
      {
        (() => {
          if (flag && flag2 && !flag3) {
            if (flag4) {
              return <p>Blah</p>
            } else if (flag5) {
              return <p>Meh</p>
            } else {
              return <p>Herp</p>
            }
          } else {
            return <p>Derp</p>
          }
        })()
      }
    </div>
  )
};

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

const sampleComponent = () => {
  return (
    <div>
      {
        do => {
          if (flag && flag2 && !flag3) {
            if (flag4) {
              <p>Lorem</p>
            } else if (flag5) {
              <p>Ipsum</p>
            } else {
              <p>Dolor</p>
            }
          } else {
            <p>Sit Amet</p>
          }
        }
      }
    </div>
  )
};

Or alternatively simply use early returns

const sampleComponent = () => {
  const basicCondition = flag && flag2 && !flag3;
  if (!basicCondition) return <p>Derp</p>;
  if (flag4) return <p>Blah</p>;
  if (flag5) return <p>Meh</p>;
  return <p>Herp</p>
}

Related links:

• https://engineering.musefind.com/our-best-practices-for-writing-react-components-dec3eb5c3fc8

• Conditional rendering