🔀 Conditional Rendering

How to render a component based on a boolean condition

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

App.js 
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

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

Option 3: Logical And

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

Challenge

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.

Questions? Let's chat

Open Discord