Events are an important part of building interactive user interfaces in React.
Just like HTML, React allows us to handle user actions such as:

✔ clicks
✔ typing
✔ form submission
✔ mouse movement
✔ keyboard events
✔ focus/blur
✔ and more...

But React events work differently than regular HTML events.

In this blog, you’ll learn:

• What React Events are

• How event handling works in React

• Event object (e) explained

• Common React events with examples

• Passing arguments to event handlers

• Binding issues solved

• Best practices

Let’s dive in 👇

---

🚀 What Are React Events?

React events are synthetic events — a cross-browser wrapper around native events.

This means:

• They behave the same in all browsers

• They follow the W3C event spec

• They are lightweight and optimized

Example of an event in React:

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

Notice how React uses camelCase (onClick, onChange) instead of lowercase HTML attributes.

---

🟦 How Event Handling Works in React

In React, event handlers are passed as functions, not strings.

❌ HTML

<button onclick="handleClick()">Click</button>

✔ React

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

---

🟢 Example 1: Handling Click Event

export default function ClickEvent() {
  function handleClick() {
    alert("Button clicked!");
  }

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

---

🎯 The Event Object (e)

React automatically provides an event object to your handler.

export default function InputEvent() {
  function handleChange(e) {
    console.log("Typed:", e.target.value);
  }

  return <input type="text" onChange={handleChange} />;
}

e.target.value gives the current value typed.

---

📝 Example 2: Passing Arguments to Event Handlers

Sometimes we want to pass our own values.

function Greet({ name }) {
  function sayHello(username) {
    alert(`Hello ${username}`);
  }

  return (
    <button onClick={() => sayHello(name)}>
      Greet
    </button>
  );
}

Here () => sayHello(name) ensures the function runs on click, not immediately.

---

🔁 Example 3: Handling Form Submit

export default function FormEvent() {
  function handleSubmit(e) {
    e.preventDefault(); // stop page reload
    console.log("Form submitted");
  }

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

---

🎹 Example 4: Keyboard Events

function KeyPress() {
  const keyPress = (e) => {
    console.log("Key pressed:", e.key);
  };

  return <input onKeyDown={keyPress} />;
}

Available keyboard events:

---

🐭 Example 5: Mouse Events

function MouseEvents() {
  return (
    <div 
      onMouseEnter={() => console.log("Mouse entered")}
      onMouseLeave={() => console.log("Mouse left")}
    >
      Hover me
    </div>
  );
}

Common mouse events:

---

👁 Example 6: Focus Events

function FocusEvent() {
  return (
    <input
      onFocus={() => console.log("Focused")}
      onBlur={() => console.log("Blurred")}
    />
  );
}

---

🔄 Example 7: Using Events with State

Events are most powerful when combined with useState.

import { useState } from "react";

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

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>+ Add</button>
    </div>
  );
}

---

🧩 Solving the Binding Issue (Class Components)

If you still use class components, event methods must be bound:

class App extends React.Component {
  constructor() {
    super();
    this.state = { count: 0 };
    this.increment = this.increment.bind(this);
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return <button onClick={this.increment}>Click</button>;
  }
}

Or use arrow functions:

increment = () => { ... }

---

⭐ Best Practices for React Events

✔ Use camelCase for events
✔ Do not call event handlers directly (onClick={handleClick} not handleClick())
✔ Use arrow functions only when necessary
✔ Avoid inline functions inside loops for performance
✔ Keep event handlers small and clean
✔ Use e.preventDefault() for forms
✔ Use state to update UI based on events

---

🎉 Conclusion

React events make your UI interactive and dynamic. You learned:

✔ How React events work
✔ Click, Change, Submit events
✔ Keyboard & Mouse events
✔ Passing arguments
✔ Event object
✔ Best practices
✔ Real examples