Q1. Can you use if-else statements directly inside JSX?
No, you cannot use if-else directly inside JSX because JSX is syntactic sugar for function calls. However, you can use if-else outside JSX to decide what to return, or use ternary operators and logical && inside JSX.
Q2. How do you implement if-else logic inside a component?
You can use if-else before the return statement. For example: if (loading) { return ; } else { return ; }. This is clean and readable. Alternatively, you can use a switch statement for multiple conditions.
Q3. What is an element variable?
An element variable is a variable that holds a JSX element. You can use if-else to assign different JSX to the variable, then render it. Example: let button; if (loggedIn) { button = ; } else { button = ; } return
{button}
.Q4. Can you use switch statements for conditional rendering?
Yes, you can use switch statements before return to choose between multiple options. For example, based on a status variable, you can return different components. This is useful for multiple mutually exclusive conditions.
Q5. What are the downsides of using too many conditionals in render?
Too many conditionals can make code hard to read and maintain. Consider breaking components into smaller ones or using early returns to simplify. Also, excessive logic in JSX can reduce clarity.