Switch Statements in JSX

#react #javascript

JSX allows us to describe our UI using javascript expressions. This has interesting implications for control flow, because control flow statements in javascript (if, for, switch, etc) do not return values (they are imperative). This means that while we can use control flow statements to return top-level blocks of JSX,

if (isLoading) {
  return <span>loading...</span>
} else {
  return (
    <section>
      <h1>My content</h1>
      {content}
    </section>
  )
}

we cannot use them inline.

return (
  <section>
    <h1>My content</h1>
    {/* this is a syntax error ... */}
    {if (isLoading) {
      return <span>loading</span>
    } else {
      return content
    }}
  </section>
)

However, since JSX allows for embedded Javascript expressions, rather than statements, we can mimic the functionality of if, else and switch using the ternary operator!

// a simple if-else
return (
  <section>
    <h1>My content</h1>
    {isLoading ? (
      <span>loading</span>
    ) : (
      content
    )}
  </section>
)

// a switch (nested ternary)
return (
  <section>
    <h1>My content</h1>
    {isLoading ? (
      <span>loading</span>
    ) : hasErrors ? (
      <span>something went wrong</span>
    ) : (
      content // this is the last "else" case
    )}
  </section>)

Scrupulous style guide adherents may claim that nested ternaries are confusing and error prone, but functionally it's not different then an if-else-if chain. If you and your linter can get used to it, I think it's a cleaner way to represent switch logic in JSX!