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.