DEV Community

loading...
Cover image for Switch Statements in JSX

Switch Statements in JSX

David Woodward
Full Stack Dev @ Cvent. ❤️ React, Node, Functional Programming and the Actor pattern
・1 min read

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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>
)
Enter fullscreen mode Exit fullscreen mode

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>)
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (1)

Collapse
danwood profile image
Dan Wood

That sure looks ugly, confusing and error prone to me.

But that's my personal preference.