React conditional rendering with switch statement

Posted on November 11, 2020


The switch/case statement is a conditional operator that’s commonly used as an alternative to if...else statement.

For example, let’s say you have a blogging application. You want to display different layout based on the user’s role:

function App(props){
  const { role } = props
  if (role === 'author'){
    return <AuthorLayout>What will you write today?</AuthorLayout>
  }
  if (role === 'admin'){
    return <AdminLayout>Your latest reports </AdminLayout>
  }
  if (role === 'moderator'){
    return <ModeratorLayout>Your ongoing events</ModeratorLayout>
  }
  return <GuestLayout>Your current feed</GuestLayout>
}

You can refactor the above component using switch/case statement as follows:

function App(props){
  const { role } = props
  switch(role) {
    case 'author':
      return <AuthorLayout>What will you write today?</AuthorLayout>
    case 'admin':
      return <AdminLayout>Your latest reports </AdminLayout>
    case 'moderator':
      return <ModeratorLayout>Your ongoing events</ModeratorLayout>
    default:
      return <GuestLayout>Your current feed</GuestLayout>
  }
}

Unlike in general JavaScript function where you need to use break statement, React component already has return statement that stops the switch operation.

But if you use switch without return, then you still need the break statement to prevent “falling through” the next case:

function App(props){
  const { role } = props
  let component
  switch(role) {
    case 'author':
      component = <AuthorLayout>What will you write today?</AuthorLayout>
    break
    case 'admin':
      component = <AdminLayout>Your latest reports </AdminLayout>
    break
    case 'moderator':
      component = <ModeratorLayout>Your ongoing events</ModeratorLayout>
    break
    default:
      component = <GuestLayout>Your current feed</GuestLayout>
  }
  return component
}

Both patterns are valid in React, so you can choose which one’s perfect for your case. When you have a range of conditions, it’s better to use if...else...then:

if(role === 'author' && isSuspended === false && published === true){
  // run the code
}

When you have only one value to evaluate, it’s generally recommended to use switch.

More about React:

Level up your React skill today 🔥

Build FOUR projects using React with my latest book.

Structured knowledge from beginner to experienced level!

Learn more