Introduction
Conditional Rendering means displaying different UI based on a condition. React allows us to show, hide, or change elements depending on values such as login status, user type, button state, or available data. JavaScript conditions like if, ternary operators, and logical && are commonly used for this purpose. In this chapter, you will practice React Conditional Rendering through 10 solved questions, starting with simple conditions and moving toward practical UI examples. React js Conditional Rendering practice questions with solutions help to understand the concepts.
1. What is Conditional Rendering in React?
Conditional Rendering means showing different content depending on whether a condition is true or false.
Example:
function App() {
const isLoggedIn = true;
if (isLoggedIn) {
return <h2>Welcome User</h2>;
}
return <h2>Please Login</h2>;
}
export default App;
If isLoggedIn is true, React displays:
Welcome User
If it is false, React displays:
Please Login
Answer: Conditional Rendering allows React to display different UI based on a condition.
2. How do you use an if statement for Conditional Rendering?
You can use a normal JavaScript if statement inside a component.
function UserStatus() {
const isLoggedIn = true;
if (isLoggedIn) {
return <h2>You are logged in.</h2>;
}
return <h2>You are not logged in.</h2>;
}
export default UserStatus;
When isLoggedIn is true, the first return statement runs.
When it is false, the second return statement runs.
Answer: Use an if statement when you want to choose between different return outputs based on a condition.
3. How do you use the ternary operator in React?
The ternary operator is useful when you need to choose between two values or UI elements.
Its basic syntax is:
condition ? valueIfTrue : valueIfFalse
Example:
function App() {
const isLoggedIn = true;
return (
<h2>
{isLoggedIn ? "Welcome User" : "Please Login"}
</h2>
);
}
export default App;
If isLoggedIn is true, it displays:
Welcome User
Otherwise, it displays:
Please Login
Answer: The ternary operator is a short way to render one of two possible outputs.
4. How do you conditionally render an element using &&?
The logical && operator can be used when you want to display something only when a condition is true.
function App() {
const isLoggedIn = true;
return (
<div>
<h2>Home Page</h2>
{isLoggedIn && <button>Logout</button>}
</div>
);
}
export default App;
If isLoggedIn is true, the button appears.
If it is false, the button is not rendered.
The basic pattern is:
{condition && <Element />}
Answer: Use && when an element should be rendered only if a condition is true.
5. How do you conditionally render a Login or Logout button?
A ternary operator can easily switch between two buttons.
function App() {
const isLoggedIn = true;
return (
<div>
{isLoggedIn ? (
<button>Logout</button>
) : (
<button>Login</button>
)}
</div>
);
}
export default App;
When the value is true, the Logout button appears.
When the value is false, the Login button appears.
Answer: Use a ternary expression when you need to display one of two different UI elements.
6. How do you use State for Conditional Rendering?
State is commonly used to control whether an element is displayed.
import { useState } from "react";
function App() {
const [isVisible, setIsVisible] = useState(false);
return (
<div>
<button onClick={() => setIsVisible(!isVisible)}>
Show / Hide
</button>
{isVisible && (
<p>This content is now visible.</p>
)}
</div>
);
}
export default App;
Initially:
isVisible = false
so the paragraph is not displayed.
After clicking the button, the state changes to true, and the paragraph appears.
Answer: State can store a condition and events can change that state to control what appears on the screen.
7. How do you render different content for different user types?
You can use conditions to display content based on a user’s role.
function UserPanel() {
const userType = "admin";
if (userType === "admin") {
return <h2>Admin Dashboard</h2>;
}
return <h2>User Dashboard</h2>;
}
export default UserPanel;
If:
userType = "admin"
the component displays:
Admin Dashboard
For another user type, it displays the regular user dashboard.
Answer: Conditions can be used to show different UI based on values such as user roles.
8. How do you render a message when data is available?
The && operator can be used to display content only when data exists.
function App() {
const message = "Welcome to React!";
return (
<div>
{message && <p>{message}</p>}
</div>
);
}
export default App;
If message contains text, the paragraph is displayed.
This pattern is useful for optional UI elements.
Answer: Use a condition with && when content should appear only when a value is available or truthy.
9. How do you use multiple conditions in React?
You can use if...else if...else when there are more than two possible conditions.
function Result() {
const marks = 75;
if (marks >= 80) {
return <h2>Excellent</h2>;
} else if (marks >= 60) {
return <h2>Good</h2>;
} else {
return <h2>Needs Improvement</h2>;
}
}
export default Result;
For marks = 75, the output is:
Good
Answer: Use if...else if...else when you need to handle multiple possible conditions.
10. Build a practical Login Status component using Conditional Rendering.
Create a component that displays a login message and the appropriate button based on state.
import { useState } from "react";
function LoginStatus() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const handleLogin = () => {
setIsLoggedIn(true);
};
const handleLogout = () => {
setIsLoggedIn(false);
};
return (
<div>
{isLoggedIn ? (
<div>
<h2>Welcome! You are logged in.</h2>
<button onClick={handleLogout}>
Logout
</button>
</div>
) : (
<div>
<h2>Please log in to continue.</h2>
<button onClick={handleLogin}>
Login
</button>
</div>
)}
</div>
);
}
export default LoginStatus;
How it works
The component starts with:
const [isLoggedIn, setIsLoggedIn] = useState(false);
Because the value is initially false, the Login message and Login button are displayed.
When the user clicks Login:
setIsLoggedIn(true);
the state becomes true.
React then renders:
Welcome! You are logged in.
Logout
When the user clicks Logout:
setIsLoggedIn(false);
the UI changes back to the logged-out state.
Answer: Conditional Rendering combined with State can create interactive UI that changes automatically according to the user’s actions.
Key Takeaways
- Conditional Rendering displays UI based on conditions.
- React uses normal JavaScript conditions for rendering decisions.
ifstatements are useful for choosing between larger blocks of UI.- The ternary operator is useful for choosing between two outputs.
- The
&&operator is useful for rendering something only when a condition is true. - State can be used to control conditional UI.
- Conditional Rendering is useful for login/logout interfaces.
- User roles can determine which content is displayed.
- Multiple conditions can be handled with
if...else if...else. - Conditional Rendering is commonly used for buttons, messages, menus, forms, loading states, and user-specific content.
FAQs
1. What is Conditional Rendering in React?
Conditional Rendering means displaying different UI depending on whether a condition is true or false.
2. Can we use if statements in React?
Yes. JavaScript if statements can be used inside components to decide what the component should return.
3. What is the ternary operator in React?
The ternary operator is a short conditional expression with three parts:
condition ? trueValue : falseValue
4. What does && do in React Conditional Rendering?
The && operator can render an element only when the condition on its left side is truthy.
{isLoggedIn && <button>Logout</button>}
5. Can State be used for Conditional Rendering?
Yes. State can store values such as true or false, which can then control what the component renders.
6. When should we use a ternary operator instead of &&?
Use a ternary when you need to choose between two outputs. Use && when you only need to render something when a condition is true.
7. Where is Conditional Rendering commonly used?
It is commonly used for login/logout screens, loading messages, error messages, menus, permissions, forms, user roles, and showing or hiding content.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
