Conditional Rendering How to render a component based on a boolean condition

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.

Conditional rendering is a very common pattern where you render a component based on a boolean condition. There are several ways to implement conditional rendering in React.

Option 1: If Else

function Conditional({ count }) {

  if (count > 5) {
    return <h1>Count is greater than 5</h1>;
  } else {
    return <h1>Count is less than 5</h1>;

Option 2: Ternary

{count % 2 === 0 ? <h1>Count is even</h1> : <h1>Count is odd</h1> }

Option 3: Logical And

{count && 2 === 0 ? <h1>Count is even</h1> }


Define a LoadingButton component. The button takes loading state, onClick, and label as props then renders the label or loader depending on the loading state.


Ask questions via GitHub below OR chat on Slack #questions