Quiz for If & Else in JSX

Q1: How do you perform conditional rendering using if-else in JSX?

A. Use standard if-else outside JSX and return different JSX B. Use if-else directly inside JSX C. Use JSX tags inside if-else block D. React does not support conditionals

Q2: What will be the output of `if (isLoggedIn) return <Dashboard />; else return <Login />;`?

A. <Dashboard /> if logged in, else <Login /> B. Error C. Always <Dashboard /> D. Always <Login />

Q3: Where should the if-else logic be placed when using JSX?

A. Inside the JSX B. Inside the return statement C. Outside the return, before return D. In the componentDidMount

Q4: Which is NOT a valid way to do conditional rendering in React?

A. Ternary operator B. Logical && operator C. Using switch-case in render D. Using do-while loop

Q5: What is the most concise way to render content conditionally in JSX?

A. Using if-else B. Using switch-case C. Using ternary operator D. Using loop

Q6: What will `{isLoggedIn && <Profile />}` do if isLoggedIn is false?

A. Render <Profile /> B. Render nothing C. Throw error D. Render null

Q7: Can you use if-else statements directly inside JSX return block?

A. Yes, always B. No, JSX doesn’t support if-else C. Only in functional components D. Only with Babel plugin

Q8: Which of these is the best place to handle complex conditional logic?

A. Directly inside return() B. Outside the return block C. In JSX attributes D. In CSS file

Q9: What happens if both if and else blocks return JSX?

A. Only one will render B. Both render C. It will throw error D. None render

Q10: What does `isAdmin ? <AdminPanel /> : <UserPanel />` mean?

A. Always renders <AdminPanel /> B. Renders based on isAdmin value C. Syntax error D. Never renders anything

Q11: Which keyword is required for an if statement?

A. when B. unless C. if D. condition

Q12: Which expression will show a warning in React?

A. Using if inside JSX B. Using ternary inside JSX C. Using short-circuit && D. Using map for list rendering

Q13: Which is better for inline rendering of two options?

A. if-else block B. for loop C. ternary operator D. do-while loop

Q14: Which of the following can be used to prevent component rendering?

A. Return null B. Return undefined C. Return string D. Return function

Q15: Can you use switch statements inside render method?

A. Yes B. No C. Only in class components D. Only with hooks

Q16: What will be the output: `if (true) return <div>Hello</div>; else return <p>Hi</p>;`?

A. Hello B. Hi C. Both D. Error

Q17: Can you store JSX in a variable after condition check?

A. Yes B. No C. Only in class component D. Only if variable is const

Q18: Which operator works well for optional rendering?

A. == B. && C. || D. !==

Q19: Is `if-else` part of JSX syntax?

A. Yes B. No C. Only in TypeScript D. Only in Babel

Q20: What is the result of rendering `isReady && <span>Ready</span>` when isReady is false?

A. It renders "Ready" B. It renders undefined C. It renders false D. It renders nothing