📄Assignments Of Class 7 Conditional Rendering
✅ Assignment 1: Show Login Message
Using if Statement
📝
Task: Create a
component that displays "Welcome, User!" if isLoggedIn is true,
otherwise show "Please login".
✅ Solution:
function WelcomeMessage(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <h1>Welcome, User!</h1>;
} else {
return <h1>Please login</h1>;
}
}
💡
How to use:
<WelcomeMessage isLoggedIn={true} />
✅ Assignment 2: Use Ternary to Show
Different Buttons
📝
Task: Create a
component that shows Login button if isLoggedIn is false, else show Logout
button.
✅ Solution:
function AuthButton(props) {
return (
<div>
{props.isLoggedIn ? (
<button>Logout</button>
) : (
<button>Login</button>
)}
</div>
);
}
💡
How to use:
<AuthButton isLoggedIn={false} />
✅ Assignment 3: Show Notification
Using &&
📝
Task: Show
"You have new messages!" only if hasMessages is true.
✅ Solution:
function Notification(props) {
return (
<div>
<h2>Hello!</h2>
{props.hasMessages && <p>You have new messages!</p>}
</div>
);
}
💡
How to use:
<Notification hasMessages={true} />
✅ Assignment 4: Show Time-Based
Greeting (if-else)
📝
Task: Based on
the current hour, show a greeting.
✅ Solution:
function GreetingByTime() {
const hour = new Date().getHours();
let greeting;
if (hour >= 5 && hour < 12) {
greeting = "Good Morning";
} else if (hour >= 12 && hour < 18) {
greeting = "Good Afternoon";
} else if (hour >= 18 && hour < 21) {
greeting = "Good Evening";
} else {
greeting = "Good Night";
}
return <h2>{greeting}</h2>;
}
✅ Assignment 5: Show Login/Logout
With State
📝
Task: Create a
button that toggles between Login and Logout using useState.
✅ Solution:
import React, { useState } from "react";
const [isLoggedIn, setIsLoggedIn] = useState(false);
<div>
<h2>{isLoggedIn ? "Welcome Back!" : "Please
Login"}</h2>
<button onClick={() => setIsLoggedIn(!isLoggedIn)}>
{isLoggedIn ? "Logout" :
"Login"}
</button>
</div>
);
}
✅ Assignment 6: Show Discount
Message with &&
📝
Task: If hasDiscount
is true, display "You got a discount!".
✅ Solution:
function DiscountMessage({ hasDiscount }) {
return (
<div>
<h3>Welcome to the store</h3>
{hasDiscount && <p>You got a discount!</p>}
</div>
);
}
✅ Assignment 7: Show Profile Details
Conditionally
📝
Task: If isLoggedIn
is true, show user's name, else "Guest".
✅ Solution:
function Profile({ isLoggedIn, name }) {
return (
<h2>{isLoggedIn ? `Hello, ${name}` : "Hello, Guest"}</h2>
);
}
💡
How to use:
<Profile isLoggedIn={true} name="Ravi" />
✅ Assignment 8: Show Product Stock
Status
📝
Task: If stock
> 0, show "In Stock", else "Out of Stock".
✅ Solution:
function ProductStatus({ stock }) {
return (
<p>{stock > 0 ? "In Stock" : "Out of
Stock"}</p>
);
}
✅ Assignment 9: Show User Role
📝
Task: If the
user is an admin, display "Welcome Admin", else "Welcome
User".
✅ Solution:
function RoleMessage({ role }) {
return (
<h2>{role === "admin" ? "Welcome Admin" :
"Welcome User"}</h2>
);
}
✅ Assignment 10: Combine All
Concepts in One App
📝
Task: Build a
small component that:
- Shows greeting based on time
- Shows login/logout button
- Shows a notification message if
hasMessages is true
✅ Solution:
import React, { useState } from "react";
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const hasMessages = true;
const hour = new Date().getHours();
let greeting;
if (hour >= 5 && hour < 12) {
greeting = "Good Morning";
} else if (hour >= 12 && hour < 18) {
greeting = "Good Afternoon";
} else if (hour >= 18 && hour <= 21) {
greeting = "Good Evening";
} else {
greeting = "Good Night";
}
return (
<div>
<h1>{greeting}</h1>
<h2>{isLoggedIn ? "Welcome Back!" : "Please
Login"}</h2>
<button onClick={() => setIsLoggedIn(!isLoggedIn)}>
{isLoggedIn ? "Logout" :
"Login"}
</button>
{hasMessages && <p>You have new notifications.</p>}
</div>
);
}
export default App;
