React Events

React Events let your app respond to user actions - clicks, typing, hovering, and more!

What are Events?

Events happen when users interact with your app:

• Click a button
• Type in an input
• Hover over an image
• Submit a form

React makes handling these super easy!

Click Events

The most common event is onClick:

function ClickButton() {
  const handleClick = () => {
    alert('Button clicked!');
  };

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

Shorter Version

<button onClick={() => alert('Clicked!')}>
  Click Me
</button>

Common Events

onClick - Button Clicks

function App() {
  return (
    <button onClick={() => console.log('Clicked!')}>
      Click Me
    </button>
  );
}

onChange - Input Changes

function SearchBox() {
  const handleChange = (event) => {
    console.log('User typed:', event.target.value);
  };

  return (
    <input
      type="text"
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}

onSubmit - Form Submit

function LoginForm() {
  const handleSubmit = (event) => {
    event.preventDefault(); // Don't reload page
    console.log('Form submitted!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" />
      <button type="submit">Login</button>
    </form>
  );
}

onMouseEnter & onMouseLeave - Hover

function HoverCard() {
  return (
    <div
      onMouseEnter={() => console.log('Mouse entered')}
      onMouseLeave={() => console.log('Mouse left')}
    >
      Hover over me!
    </div>
  );
}

Events with State

Events usually update state:

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
      <button onClick={() => setCount(count - 1)}>
        Decrease
      </button>
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}

Passing Arguments to Event Handlers

Sometimes you need to pass data to your event handler:

function ButtonList() {
  const handleClick = (buttonName) => {
    alert(`You clicked ${buttonName}`);
  };

  return (
    <div>
      <button onClick={() => handleClick('Button 1')}>
        Button 1
      </button>
      <button onClick={() => handleClick('Button 2')}>
        Button 2
      </button>
    </div>
  );
}

Getting Input Values

function NameInput() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={handleChange}
      />
      <p>Hello, {name}!</p>
    </div>
  );
}

Preventing Default Behavior

Some events have default behavior (like form submission reloading the page). Prevent it with event.preventDefault():

function ContactForm() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted without page reload!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="Your email" />
      <button type="submit">Send</button>
    </form>
  );
}

Complete Example - Todo Input

function TodoInput() {
  const [task, setTask] = useState('');
  const [todos, setTodos] = useState([]);

  const handleSubmit = (event) => {
    event.preventDefault();
    if (task.trim()) {
      setTodos([...todos, task]);
      setTask(''); // Clear input
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          value={task}
          onChange={(e) => setTask(e.target.value)}
          placeholder="Add a task"
        />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

Event Naming Convention

React events use camelCase (not lowercase):

• ❌ onclick (HTML)

• ✅ onClick (React)

• ❌ onchange

• ✅ onChange

Remember

• Events respond to user actions
• Use onClick for button clicks
• Use onChange for inputs
• Use onSubmit for forms
• Use event.preventDefault() to stop default behavior
• Combine events with state for interactive apps

Next: Learn React Lists - Display arrays of data!