Conditional Rendering React

React Conditional Rendering
●​ Conditional rendering refers to rendering different components or elements based on
certain conditions.
●​ This is similar to how conditions work in JavaScript, where you use if, else, ternary
operators, or switch statements to execute code based on different scenarios.
●​ React provides several ways to render components or parts of the UI conditionally.


Using if Statements
●​ You can use standard JavaScript if statements within a component to conditionally render
content.
●​ This is a basic method and works well for simple conditions.

Example:

​ function Welcome({isLoggedIn}) {


if (isLoggedIn) {
return <h1>Welcome back, user!</h1>;
} else {
return <h1>Please log in.</h1>;
}
}


function App() {
return (
<div>
<Welcome isLoggedIn={true} />
</div>
);
}

, export default App;


●​ Here, based on the value of isLoggedIn, the component renders either "Welcome back,
user!" or "Please log in."
●​ The if statement is placed inside the component to control what gets returned.


Using Ternary Operator (? :)
●​ The ternary operator is a shorthand way of writing conditions in React and is often used
for inline rendering.
●​ It’s more concise than an if-else statement but does the same job.
function Welcome({isLoggedIn}) {
return (
<div>
{isLoggedIn ? <h1>Welcome back, user!</h1> : <h1>Please log in.</h1>}
</div>
);
}


function App() {
return (
<div>
<Welcome isLoggedIn={false} />
</div>
);
}


export default App;


●​ In this case, the ternary operator (?) checks if isLoggedIn is true. If true, it renders
"Welcome back, user!" If false, it renders "Please log in."
●​ It’s useful for simple conditions inside JSX, where you need quick, conditional rendering.