React Conditional Rendering

There are several ways to do conditional rendering in React based on the situation. In this article, we will see few practical approaches in conditional rendering components in React.

Conditional rendering using If statement

Say you have a list of items and you want to show the list only when it exists, then you can render it as follows:

const App = ({ list }) => {
  if (!list) {
    return null
  }

  return (
    <ul>
      {list.map(item => (
        <li key={item.name}>{item.name}</li>
      ))}
    </ul>
  )
}

export default App

You could also write this in a different way as shown below:

const App = ({ list }) => {
  if (list) {
    return (
      <ul>
        {list.map(item => (
          <li key={item.name}>{item.name}</li>
        ))}
      </ul>
    )
  }

  return null
}

export default App

Conditional rendering using if-else statement

In the above example, if we want to display a message to the user when the list is empty, we can achieve it with an if-else statement:

const App = ({ list }) => {
  if (!list) {
    return null
  }
  if (list.length === 0) {
    return <div>List is empty</div>
  } else {
    return (
      <ul>
        {list.map(item => (
          <li key={item.name}>{item.name}</li>
        ))}
      </ul>
    )
  }
}

export default App

You could also write the above example with just if statements, for better readability:

const App = ({ list }) => {
  if (!list) {
    return null
  }
  if (list.length === 0) {
    return <div>List is empty</div>
  }

  return (
    <ul>
      {list.map(item => (
        <li key={item.name}>{item.name}</li>
      ))}
    </ul>
  )
}

export default App

Conditional rendering using ternary operator

We can use ternary operator to simplify the conditional rendering as follows:

const App = ({ isLoggedIn }) => {
  return isLoggedIn ? <button>Logout</button> : <button>Login</button>
}

export default App

When you have multiple lines of elements to be rendered, you can wrap them inside parenthesis ():

const App = ({ isLoggedIn }) => {
  return isLoggedIn ? (
    <>
      <ShowWelcomeMessage />
      <button>Logout</button>
    </>
  ) : (
    <button>Login</button>
  )
}

export default App

Conditional rendering using Short Circuit && operator

When you want to display something when a certain condition satisfied and don't want to render anything when the condition fails, && operator is your best friend:

const App = ({ isLoading }) => {
  return isLoading && <div>Loading...</div>
}

export default App

You can club multiple conditions together with &&

const App = ({ isLoggedIn, balance }) => {
  return isLoggedIn && balance === 0 && <div>Please recharge your account</div>
}

export default App

Conditional rendering using a switch statement

When you have more than two outputs for an expression, then instead of going for if-else ladder, we can use switch statement:

const App = ({ status, message }) => {
  switch (status) {
    case "info":
      return <Info message={message} />
    case "warning":
      return <Warning message={message} />
    case "error":
      return <Error message={message} />

    default:
      return null
  }
}

export default App

If you want to embed the switch statement inside the JSX, then you can make use of immediately invoked function expressions (IIFEs).

const App = ({ status, message }) => {
  return (
    <div>
      {(() => {
        switch (status) {
          case "info":
            return <Info message={message} />
          case "warning":
            return <Warning message={message} />
          case "error":
            return <Error message={message} />

          default:
            return null
        }
      })()}
    </div>
  )
}

export default App

Using multiple conditional rendering

You can write the above switch case example with the help of JavaScript objects as shown below:

const App = ({ status, message }) => {
  return (
    <div>
      {
        {
          info: <Info message={message} />,
          warning: <Warning message={message} />,
          error: <Error message={message} />,
        }[status]
      }
    </div>
  )
}

export default App

Here status can have any of the 3 values: info, warning, and error. Based on the status value, the corresponding component will be rendered.

Nested conditional rendering

You can use ternary operators to nest multiple conditions:

const App = ({ isLoggedIn, posts }) => {
  return (
    <div>
      {isLoggedIn ? (
        posts.length === 0 ? (
          <AddPost />
        ) : (
          <ShowPosts />
        )
      ) : (
        "Please login"
      )}
    </div>
  )
}

export default App

Here we check if the user is logged in, if yes then we check if the user has any posts. If they do not have any posts then we ask them to add one and if there are posts then we show the posts. If the user is not logged in, then we ask them to log in.

This type of nesting is not recommended since it hinders readability. When you have nested conditions, always split them into multiple components:

const App = ({ isLoggedIn, posts }) => {
  return <div>{isLoggedIn ? <Posts posts={posts} /> : "Please login"}</div>
}

const Posts = ({ posts }) => {
  return posts.length === 0 ? <AddPost /> : <ShowPosts />
}