# 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:

```jsx
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:

```jsx
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:

```jsx
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:

```jsx
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to simplify the conditional rendering as follows:

```jsx
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 ():

```jsx
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:

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

export default App
```

You can club multiple conditions together with &&

```jsx
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:

```jsx
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](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)).

```jsx
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:

```jsx
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:

```jsx
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:

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

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