Q1. What is conditional rendering in React?
Conditional rendering is a technique to render different UI elements based on a condition. It works like JavaScript conditionals: you can use if statements, ternary operators, or logical && to decide what to render. This allows dynamic interfaces.
Q2. How do you use if statements for conditional rendering?
You can use if-else outside the JSX. For example, if (isLoggedIn) { return ; } else { return ; }. Inside JSX, you can't use if, but you can use ternary or &&.
Q3. What is the ternary operator for conditional rendering?
The ternary operator is used inside JSX: {condition ? : }. It's concise and good for simple conditions. Example: {isLoggedIn ? : }
Q4. How does the logical && operator work for conditional rendering?
The && operator renders the right-hand side if the left-hand side is true. Example: {unreadMessages.length > 0 &&
You have {unreadMessages.length} messages.
}. If the left side is false, nothing renders.Q5. What is the best practice for conditional rendering?
Use ternary for simple if-else, && for single condition, and if-else outside JSX for complex logic. Also consider using element variables to store conditional elements for readability.