Episode 2 — React Frontend Architecture NextJS / 2.5 — Event Handling and Conditional Rendering

2.5 — Exercise Questions: Event Handling & Conditional Rendering

How to use this material:

  1. Try answering each question before looking at the referenced sub-topic file.
  2. Write actual code — don't just think through answers.
  3. Questions marked 🔧 require hands-on coding in a React project.
  4. Questions marked 🤔 are conceptual — explain in your own words.
  5. Check your answers against the sub-topic files linked in each section.

2.5.a — Handling Click Events (Q1–Q12)

Q1. 🤔 What is a SyntheticEvent? How does it differ from a native browser event?

Q2. What is the output of this code when you click the button? Explain why.

<button onClick={handleClick()}>Click</button>

Q3. 🤔 Explain the difference between event.target and event.currentTarget with a practical example.

Q4. 🔧 Create a button that logs different messages based on whether the user holds Shift, Ctrl/Cmd, or clicks normally.

Q5. 🤔 Why do React event names use camelCase (onClick) instead of lowercase (onclick)?

Q6. 🔧 Write a component that handles a double-click event to toggle between view mode and edit mode for a text field.

Q7. Compare three ways to pass arguments to event handlers (arrow wrapper, currying, data attributes). When would you prefer each?

Q8. What's the naming convention for event handlers inside a component vs event props passed to children?

Q9. 🤔 Why don't functional components have the this binding problem that class components had?

Q10. 🔧 Write a component that tracks mouse position (x, y coordinates) and displays them. Use onMouseMove on a container div.

Q11. What is the execution order when you click the innermost element in this structure?

<div onClickCapture={() => console.log('A')}>
  <div onClick={() => console.log('B')}>
    <button onClick={() => console.log('C')}>Click</button>
  </div>
</div>

Q12. 🔧 Build a "card with action button" where clicking the card navigates somewhere, but clicking a delete button inside the card only triggers delete (not navigation). Use stopPropagation.

2.5.b — Controlled Inputs (Q13–Q24)

Q13. 🤔 What makes an input "controlled" vs "uncontrolled"? What's the single source of truth in each case?

Q14. What happens if you write <input value={name} /> without an onChange handler? What warning does React show?

Q15. 🔧 Build a controlled text input that converts all input to uppercase as the user types.

Q16. 🤔 React's onChange behaves differently from the native HTML change event. How?

Q17. 🔧 Create a controlled textarea that shows a live word count and character count below it.

Q18. 🔧 Build a controlled select dropdown populated from an array of objects. Display the selected item's details below.

Q19. What is the difference between value and checked for checkboxes? Write a buggy example and its fix.

Q20. 🔧 Create a multi-checkbox component where the user selects interests from a list. Store selected values in an array.

Q21. 🔧 Build a registration form with firstName, lastName, email, and role (select) using a SINGLE handleChange function. Use the name attribute and computed property names.

Q22. 🔧 Create a phone number input that auto-formats as the user types: (555) 123-4567.

Q23. 🤔 Why can't file inputs be controlled? What alternative approach do you use?

Q24. 🔧 Build an email input with real-time validation — show a green border for valid, red for invalid, gray for untouched. Use onBlur for "touched" tracking.

2.5.c — Conditional Rendering Patterns (Q25–Q40)

Q25. 🤔 List all the conditional rendering patterns in React and give a one-line example of each.

Q26. What does this render when count is 0? Why?

{count && <span>{count} items</span>}

Give three different fixes.

Q27. 🤔 Which of these values render as visible text in JSX: false, null, undefined, 0, NaN, "", true, []?

Q28. 🔧 Write a component that shows a loading spinner, error message, empty state, OR data list depending on props isLoading, error, data. Use early returns.

Q29. 🤔 When would you use an object lookup pattern instead of a switch statement for conditional rendering?

Q30. 🔧 Build an Alert component that accepts a type prop (success, error, warning, info) and renders with different colors and icons. Use the object lookup pattern.

Q31. 🤔 What is wrong with this code?

function BadComponent({ showCounter }) {
  if (showCounter) {
    const [count, setCount] = useState(0);
  }
  return <div>...</div>;
}

Q32. 🔧 Refactor this nested ternary into a cleaner pattern:

{role === 'admin' ? <Admin /> : role === 'editor' ? <Editor /> : role === 'viewer' ? <Viewer /> : <Guest />}

Q33. 🤔 Explain the difference between conditional rendering ({show && <X />}) and CSS hiding (display: none). When does each make sense?

Q34. 🔧 Create a feature flag system: a component that accepts a featureFlags object and conditionally renders beta features.

Q35. Write conditional props for a button — it should get aria-pressed="true" and a different background only when isActive is true.

Q36. 🤔 Why does {true} render nothing in JSX but {0} renders "0"?

Q37. 🔧 Build a role-based navigation component where different menu items appear based on the user's role.

Q38. 🤔 What's an IIFE in JSX? When might you use one (and why should you usually avoid it)?

Q39. 🔧 Create a StatusBadge component using switch: active → green, pending → yellow, error → red, inactive → gray.

Q40. 🤔 Draw a decision flowchart for choosing which conditional rendering pattern to use.

2.5.d — Dynamic UI Rendering (Q41–Q50)

Q41. 🔧 Build a simple toggle/disclosure component that shows/hides content on click with a smooth animation.

Q42. 🔧 Create a tab component where clicking different tabs shows different content panels.

Q43. 🔧 Build a single-open accordion — when one item opens, the previously open item closes.

Q44. 🔧 Create a modal component with: backdrop click to close, Escape key to close, and scroll lock on the body.

Q45. 🔧 Build a dropdown menu that closes when clicking outside of it. Use useRef and useEffect.

Q46. 🤔 What is the "component map" pattern? Give an example of rendering different block types dynamically.

Q47. 🔧 Build a grid/list view toggle — switch between two layout modes for a product listing.

Q48. 🔧 Create a skeleton loading screen with shimmer animation for a card grid.

Q49. 🤔 What ARIA attributes should you add to an accordion? To a modal?

Q50. 🔧 Build a notification/toast system with addToast(message, type) that auto-removes after 3 seconds.

2.5.e — Practical Build: Dynamic Form (Q51–Q60)

Q51. 🔧 Create a form with 3 inputs (name, email, message) using a single state object and a single handleChange.

Q52. 🔧 Add validation to the form from Q51: name is required, email must be valid, message must be >10 characters.

Q53. 🤔 Why should validation errors only show after a field is "touched" (blurred)? What's the UX impact of showing errors immediately?

Q54. 🔧 Build a 2-step form wizard with navigation (Next/Back) and per-step validation.

Q55. 🔧 Create a password input with a real-time strength meter showing requirements as checkmarks.

Q56. 🔧 Build a "confirm password" field that validates against the password field in real-time.

Q57. 🤔 How would you extract the form logic from Q51-Q56 into a reusable useForm custom hook?

Q58. 🔧 Create a dynamic form where users can add/remove "skill" text fields.

Q59. 🔧 Build a review step that displays all form data in a summary view before final submission.

Q60. 🔧 Add loading, success, and error states to form submission with visual feedback.

Use 2.5 sub-topic files to check your understanding.