Event Handling in React

1. Synthetic Events in React

React wraps native browser DOM events in a cross-browser abstraction called SyntheticEvent. This ensures consistent event behavior across Chrome, Firefox, Safari, Edge, and mobile browsers.

2. Event Handling Syntax

In standard HTML, event attributes are lowercase strings (e.g. onclick="handleClick()"). In React JSX:

• Event names are camelCase (e.g. onClick, onChange, onKeyDown, onSubmit).
• You pass a function reference directly inside curly braces: onClick={handleClick}.

function SubmitButton() {
  // Event handler definition
  const handleClick = (e) => {
    console.log("Button clicked!", e);
  };

  // Pass function reference (DO NOT call it like handleClick())
  return Save Answers;
}

3. Passing Arguments to Event Handlers

To pass custom parameters to an event handler, wrap the invocation in an anonymous arrow function:

function OptionList() {
  const handleSelectOption = (optionLetter, e) => {
    console.log("Selected option:", optionLetter);
  };

  return (
    

       handleSelectOption("A", e)}>Option A
       handleSelectOption("B", e)}>Option B
       handleSelectOption("C", e)}>Option C
       handleSelectOption("D", e)}>Option D
    
  );
}

4. Preventing Default Browser Actions

In React, returning false from an event handler does not prevent default browser behavior. You must explicitly call e.preventDefault():

function ExamLoginForm() {
  const handleSubmit = (e) => {
    e.preventDefault(); // Prevents page reload
    console.log("Submitting form asynchronously via API...");
  };

  return (
    

      
      Start Test
    
  );
}