💻Lecture Notes Of Class 7
Conditional Rendering
🔹 Objective:
To
understand how to render components or elements conditionally in a React
application.
🧠 What is Conditional Rendering?
Conditional
rendering means showing
different UI elements based on certain conditions. This is similar to how
we use if or else in regular JavaScript logic. In React, we use this concept to
decide what to display on the screen.
📌
For example:
- If a user is logged in, show a Logout
button.
- If a user is not logged in,
show a Login button.
🧩 Methods of Conditional Rendering
React
provides several ways to implement conditional rendering:
1️⃣ Using if Statement (Basic JS Way)
You
can use an if statement before returning JSX.
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <h1>Welcome Back!</h1>;
} else {
return <h1>Please Login</h1>;
}
}
📌
In this example:
- If isLoggedIn is true → shows Welcome
Back!
- If false → shows Please
Login
2️⃣ Using Ternary Operator (condition ?
true : false)
Useful
for inline conditional rendering inside JSX.
function Greeting(props) {
return (
<div>
{props.isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please
Login</h1>}
</div>
);
}
✅
Advantage: Cleaner code, used directly inside return.
3️⃣ Using Logical AND (&&)
Operator
This
is used when you want to render something only if a condition is true.
function Notification(props) {
const hasUnreadMessages = props.unread > 0;
return (
<div>
<h1>Hello!</h1>
{hasUnreadMessages && <p>You have {props.unread} unread
messages.</p>}
</div>
);
}
✅
If hasUnreadMessages is false, React skips rendering the message.
🛠️ Activity: Show Login/Logout Based on State
Let’s
build a small example to show a Login or Logout button based on
the user’s state.
import React, { useState } from "react";
function LoginControl() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const handleLogin = () => setIsLoggedIn(true);
const handleLogout = () => setIsLoggedIn(false);
return (
<div>
<h1>{isLoggedIn ? "Welcome Back!" : "Please
Login"}</h1>
{
isLoggedIn ? (
<button onClick={handleLogout}>Logout</button>
) : (
<button onClick={handleLogin}>Login</button>
)}
</div>
);
}
export default LoginControl;
💡 Explanation:
- We use useState to keep track
of isLoggedIn.
- Based on this state, we
conditionally render text and the button using a ternary operator.
📝 Homework: Show Different Greetings Based on Time of Day
🎯
Task: Write a component that shows different messages depending on the time.
|
Time |
Greeting |
|
5–11 |
Good Morning |
|
12–17 |
Good Afternoon |
|
18–21 |
Good Evening |
|
22–4 |
Good Night |
✨ Hint:
function TimeGreeting() {
const hour = new Date().getHours();
let message;
if (hour >= 5 && hour < 12) {
message = "Good Morning";
} else if (hour >= 12 && hour < 18) {
message = "Good Afternoon";
} else if (hour >= 18 && hour <= 21) {
message = "Good Evening";
} else {
message = "Good Night";
}
return <h2>{message}</h2>;
}
✅
You can also try this with a ternary operator or nested conditions.
📌 Summary:
|
Method |
Use Case Example |
|
if/else |
Complex logic outside JSX |
|
? : (ternary) |
Inline decisions in JSX |
|
&& |
Show something only if condition true |
🎯 Key Takeaways:
- Conditional rendering is like
adding decision-making to your UI.
- You can use plain JS logic like
if, ? :, or && inside React components.
- Useful in real-life features
like login/logout, theme switching, showing/hiding elements, etc.
