React Events

In React, just like in regular HTML and JavaScript, events are used to respond to user interactions such as clicking a button, typing in a text field, or submitting a form. However, the way React handles events is slightly different and more powerful because it uses a synthetic event system.

Let’s explore what React events are, how they work, and how you can use them in your applications.

Why Use Events in React?

Events are essential when you want your app to do something based on user interaction — for example:

• When a user clicks a button ➝ perform an action.
• When a user types in an input field ➝ update the state.
• When a user submits a form ➝ send data to a server.

React gives you a clean and consistent way to handle all these events using something called Synthetic Events.

What is a Synthetic Event?

React wraps native browser events inside a SyntheticEvent object. This is a cross-browser wrapper that behaves the same way in all browsers. It works just like a browser event, but with consistent behavior and performance optimizations.

So when you use onClick or onChange in React, you are working with this SyntheticEvent instead of the raw DOM event.

Basic Event Handling in React

In regular HTML/JS, you might write:

<button onclick="alert('Clicked!')">Click Me</button>

But in React, you write:

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

Key differences:

• The event name is written in camelCase (onClick, onSubmit, etc.).
• The event handler is passed as a function, not a string.

Example: Handling a Click Event

import React from 'react';

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

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

export default App;

Here:

• handleClick is a function that runs when the button is clicked.
• The onClick event is added directly to the button JSX.

Example: Handling Input Change

import React, { useState } from 'react';

function InputExample() {
  const [text, setText] = useState("");

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

  return (
    <div>
      <input type="text" onChange={handleChange} />
      <p>You typed: {text}</p>
    </div>
  );
}

Explanation:

• useState is used to store the input text.
• onChange event updates the state every time the user types.

Example: Form Submission

import React from 'react';

function FormExample() {
  const handleSubmit = (event) => {
    event.preventDefault(); // Prevents page reload
    alert('Form submitted!');
  };

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

• onSubmit triggers when the form is submitted.
• event.preventDefault() stops the default browser behavior (refreshing the page).

Common React Events

Best Practices for React Events

1. Use arrow functions or bind methods inside class components.
2. Avoid writing too much logic directly inside the JSX.
3. Always call event.preventDefault() when handling forms.
4. Use state to update the UI dynamically based on user events.

Advanced: Passing Parameters to Event Handlers

You can also pass custom parameters to your handler:

function App() {
const greetUser = (name) => {
alert(`Hello, ${name}`);
};

return <button onClick={() => greetUser('Janhvika')}>Greet</button>;
}


Note: We use an arrow function to call greetUser with a parameter, so it doesn’t run immediately.

Conclusion

React events are a core part of building interactive UIs. They make it easy to respond to user actions like clicks, typing, and submitting forms. With React’s synthetic event system, you get consistency across all browsers and an intuitive way to manage app behavior.

Once you understand how to use events with JSX and state, your React apps will become much more dynamic and user-friendly.