🔹MCQs Of Class 7
Conditional Rendering
1.
What
is conditional rendering in React?
a)
Rendering components only once
b) Rendering elements based on conditions
c) Rendering components in a loop
d) Rendering all components together
Answer: b
2.
Which
of the following is a correct way to conditionally render a component?
a)
Using if statements outside JSX
b) Using ternary operators inside JSX
c) Using && operator inside JSX
d) All of the above
Answer: d
3. What does this ternary expression return if isLoggedIn is true?
{isLoggedIn ? <Logout /> : <Login />}
a)
<Login />
b) <Logout />
c) Nothing
d) Both components
Answer: b
4.
How
do you write a basic if-else statement in React JSX?
a)
Directly inside JSX tags
b) Outside JSX in the component function
c) Using the ternary operator only
d) Using && only
Answer: b
5.
Which
operator is used to render something only if a condition is true?
a)
||
b) &&
c) !
d) ??
Answer: b
6.
What
will this code render if isLoggedIn is false?
{isLoggedIn && <h1>Welcome</h1>}
a)
<h1>Welcome</h1>
b) false
c) Nothing
d) Error
Answer: c
7.
Which
of the following is NOT a way of conditional rendering in React?
a)
if-else statement
b) Ternary operator
c) Logical AND (&&) operator
d) for loop
Answer: d
8.
What
is the output of this expression if age = 20?
{age > 18 ? "Adult" : "Child"}
a)
"Adult"
b) "Child"
c) true
d) Error
Answer: a
9.
Can
you use an if statement directly inside JSX?
a)
Yes
b) No
Answer: b
10.
What
is the best way to perform complex conditional rendering?
a)
Use nested ternary operators inside JSX
b) Use if-else logic outside JSX and then return JSX
c) Use && operator only
d) Use switch inside JSX
Answer: b
11.
In
the context of React, what does this syntax mean?
{condition && <Component />}
a)
Render <Component /> only if condition is true
b) Render <Component /> only if condition is false
c) Always render <Component />
d) Render nothing
Answer: a
12.
What
happens if both parts of a ternary operator are the same component?
a)
React will throw an error
b) The component renders no matter what
c) The same component renders regardless of the condition
d) The component will only render if true
Answer: c
13.
Which
React hook is commonly used to handle conditional rendering based on login
state?
a)
useEffect
b) useState
c) useRef
d) useReducer
Answer: b
14.
What
is the result of this code?
{false && <p>Show me</p>}
a)
<p>Show me</p>
b) false
c) Nothing rendered
d) Throws error
Answer: c
15.
Which
of the following is true about ternary operators?
a)
They can only be used outside JSX
b) They are a shorthand for if-else
c) They always return true
d) They cannot be nested
Answer: b
16.
What
is the key advantage of using && operator for conditional rendering?
a)
It can replace all if-else statements
b) Simple syntax for rendering when condition is true
c) It handles false cases explicitly
d) It executes asynchronous code
Answer: b
17.
Is
it possible to nest ternary operators in React JSX?
a)
Yes, but it can be confusing
b) No, React does not allow nesting
c) Only in class components
d) Only if wrapped in a function
Answer: a
18.
What
will this component render if isLoggedIn is true?
function Message({ isLoggedIn }) {
return <div>{isLoggedIn ? "Hello, User" : "Please
Log In"}</div>;
}
a)
"Hello, User"
b) "Please Log In"
c) Nothing
d) Error
Answer: a
19. Which of these is true for rendering a logout button only when logged in?
{isLoggedIn && <button>Logout</button>}
a)
Always renders Logout button
b) Renders Logout button only if logged in
c) Throws syntax error
d) Renders Login button
Answer: b
20.
What
is wrong with this code?
return (
<div>
if (isLoggedIn) {
<h1>Welcome</h1>
}
</div>
);
a)
if cannot be used inside JSX
b) Missing else statement
c) Nothing wrong
d) Should use switch instead
Answer: a
21.
Which
symbol is used for ternary conditional operator in JavaScript?
a)
? :
b) &&
c) ||
d) ==
Answer: a
22.
When
using && operator, what happens if the condition is false?
a)
The right side is evaluated and rendered
b) Nothing is rendered
c) React crashes
d) Left side is rendered
Answer: b
23.
Can
conditional rendering be used to show/hide entire components?
a)
Yes
b) No
Answer: a
24.
How
would you display a message only if count > 0?
a)
{count && <p>Count is positive</p>}
b) {count > 0 && <p>Count is positive</p>}
c) {count > 0 ? <p>Count is positive</p> : null}
d) Both b and c
Answer: d
25.
What
is a potential downside of using nested ternary operators?
a)
Reduced readability
b) Performance issues
c) Syntax errors
d) No downside
Answer: a
26.
Which
operator is most suitable for rendering a message only when condition is true,
without an else?
a)
Ternary operator
b) && operator
c) || operator
d) if inside JSX
Answer: b
27.
How
can you write conditional rendering to show a "Loading" message while
data is loading?
a)
{isLoading && <p>Loading...</p>}
b) {isLoading ? <p>Loading...</p> : null}
c) Both a and b
d) if inside JSX
Answer: c
28.
What
happens if you try to use a for loop directly inside JSX?
a)
It works fine
b) Syntax error
c) It renders the loop output directly
d) It runs asynchronously
Answer: b
29. What is rendered if this expression evaluates to null?
{null}
a)
Nothing rendered
b) Error
c) Text "null"
d) Blank space
Answer: a
30.
Which
of the following can NOT be used to conditionally render JSX?
a)
if-else outside JSX
b) switch inside JSX
c) Ternary operator inside JSX
d) Logical AND operator inside JSX
Answer: b
31.
In
React, JSX expressions must have ________.
a)
A single parent element
b) Multiple siblings at the top level
c) Only text nodes
d) No parent elements
Answer: a
32.
How
do you conditionally add a CSS class in JSX?
a)
Using ternary operator inside className
b) Using if statement inside JSX
c) Using && outside JSX
d) CSS cannot be conditional
Answer: a
33. What is the output if isAdmin is false?
{isAdmin ? <AdminPanel /> : <UserPanel
/>}
a)
<AdminPanel />
b) <UserPanel />
c) Error
d) Nothing
Answer: b
34.
Is
it a good practice to put complex logic inside JSX?
a)
Yes
b) No, better to prepare data outside JSX
Answer: b
35.
How
would you toggle login/logout button with a click?
a)
Using useState to change login state
b) Using useEffect only
c) Using setTimeout
d) Cannot toggle buttons
Answer: a
36.
Which
hook is used to maintain the login state?
a)
useState
b) useEffect
c) useContext
d) useReducer
Answer: a
37.
Which
of these shows an example of a ternary operator?
a)
{isOpen && <Menu />}
b) {isOpen ? <Menu /> : <Button />}
c) if (isOpen) {return <Menu />}
d) switch(isOpen) {}
Answer: b
38. What happens if you write this?
{true && false}
a)
true
b) false
c) Nothing rendered
d) Error
Answer: b
39. What will the following render if count = 0?
{count && <p>Count is
positive</p>}
a)
<p>Count is positive</p>
b) 0
c) Nothing
d) Error
Answer: b
40.
How
can you improve readability of multiple conditional JSX elements?
a)
Extract into separate components
b) Use nested ternary operators
c) Write all conditions inline
d) Avoid conditional rendering
Answer: a
41.
Which
of these is a valid syntax to conditionally render a component?
a)
<div>{if (loggedIn) <Welcome />}</div>
b) <div>{loggedIn ? <Welcome /> : <Login />}</div>
c) <div>{loggedIn && if <Welcome />}</div>
d) None
Answer: b
42.
If
you want to show nothing when a condition is false using ternary, what should
you write?
a)
condition ? <Component /> : null
b) condition && <Component />
c) condition ? null : <Component />
d) condition ? <Component /> : false
Answer: a
43.
Why
do you use null in React JSX?
a)
To render nothing
b) To render "null" text
c) To throw error
d) To break JSX
Answer: a
44.
What
is the difference between && and ternary operators?
a)
&& only renders for true, no else case
b) Ternary always requires an else case
c) Both can be used for conditional rendering
d) All above
Answer: d
45.
Which
of the following is true for conditional rendering in React?
a)
JSX is JavaScript so all JS expressions can be used
b) if statements can be used directly inside JSX
c) You cannot use functions for conditional rendering
d) None
Answer: a
46.
How
would you conditionally render a button only if a user is an admin?
a)
{isAdmin && <button>Delete</button>}
b) {isAdmin ? <button>Delete</button> : null}
c) Both a and b
d) None
Answer: c
47.
What
will this code output if score = 75?
{score >= 60 ? "Passed" : "Failed"}
a)
"Passed"
b) "Failed"
c) Nothing
d) Error
Answer: a
48.
Which
approach should you avoid in large JSX expressions?
a)
Using multiple if-else outside JSX
b) Using nested ternary operators
c) Using small helper components
d) Using && for simple checks
Answer: b
49.
What
is the correct way to write a conditional return inside a function component?
a)
function MyComponent(props) {
if (props.show) {
return <h1>Hello</h1>;
}
return null;
}
b)
function MyComponent(props) {
return if (props.show) <h1>Hello</h1>;
}
c)
JSX with switch inside return
d) return outside function
Answer: a
50.
When
you want to conditionally render multiple components based on several
conditions, what is recommended?
a)
Use multiple ternary operators inside JSX
b) Use if-else logic outside JSX to decide what to render
c) Write all JSX inline without conditions
d) Use loops inside JSX
Answer: b
