React Handling Events & Conditional Rendering — Interview Questions & Answers

Ques 1: What are events in React?

Ans: Events are actions triggered by user interactions like clicks, keypresses, or form submissions. React uses synthetic events, which are wrappers around native events for consistent behavior across browsers.

Ques 2: How are events handled in React?

Ans: Events in React are handled using camelCase syntax and function references instead of strings.

Example:

<button onClick={handleClick}>Click Me</button>

Ques 3: What is a SyntheticEvent in React?

Ans: SyntheticEvent is React’s cross-browser wrapper around the browser’s native event, providing consistent properties and methods.

Ques 4: What is the difference between React and HTML event handling?

Ques 5: How do you prevent default behavior in React events?

Ans: Use event.preventDefault() inside the event handler.

Example:

function handleSubmit(e) {
  e.preventDefault();
  console.log("Form submitted");
}

Ques 6: Can you pass parameters to event handlers in React?

Ans: Yes, using arrow functions.

Example:

<button onClick={() => handleDelete(id)}>Delete</button>

Ques 7: What is event binding in React?

Ans: Event binding ensures the correct this context is used inside event handlers in class components.

Example:

this.handleClick = this.handleClick.bind(this);

Ques 8: How do you handle events in class components?

class App extends React.Component {
  handleClick() {
    alert("Clicked!");
  }
  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

Ques 9: How do you handle multiple events in React?

Ans: By assigning different handler functions for each event or using a single function with conditions.

Ques 10: What is conditional rendering in React?

Ans: Conditional rendering means rendering different UI elements based on a condition (like state or props).

Ques 11: How do you implement conditional rendering in React?

Ans: You can use JavaScript conditional operators like if, &&, or ternary ? :.

Example:

{isLoggedIn ? <Dashboard /> : <Login />}

Ques 12: How can you use if statements in JSX?

Ans: You can’t use if directly in JSX, but you can use it before the return statement.

if (isAdmin) return <AdminPanel />;
return <UserPanel />;

Ques 13: How can you use the logical AND (&&) operator for conditional rendering?

{isLoggedIn && <LogoutButton />}

Ques 14: What is the ternary operator in conditional rendering?

Ans: It’s used for short, inline conditionals.

{theme === "dark" ? <DarkMode /> : <LightMode />}

Ques 15: How do you handle conditional rendering for multiple conditions?

Ans: Use nested ternaries or switch statements for readability.

{role === "admin"
  ? <AdminPanel />
  : role === "user"
  ? <UserPanel />
  : <Guest />}

Ques 16: How can you conditionally apply CSS classes in React?

<div className={isActive ? "active" : "inactive"}>Hello</div>

Ques 17: What is the difference between conditional rendering and short-circuit rendering?

Ans: Conditional rendering uses ? : to decide between two elements; short-circuit (&&) renders an element only if the condition is true.

Ques 18: Can we use switch statements for rendering different components?

Ans: Yes.

switch (view) {
  case "home": return <Home />;
  case "about": return <About />;
  default: return <NotFound />;
}

Ques 19: How do you show or hide elements dynamically in React?

Ans: By toggling a boolean state variable.

Example:

{show ? <Modal /> : null}

Ques 20: What are best practices for conditional rendering?

• Keep conditions simple.
• Use helper functions for complex logic.
• Avoid deeply nested ternaries.
• Prefer && for optional elements.