How to Handle Events in a React App

Are you new to React and wondering how to make your app interactive? In this guide I’ll walk through handling events like button clicks and form submissions in a React app. Don’t worry if you’re just starting out I’ll keep things simple and easy to understand.

Getting Started: The Button Click

Let’s start with a basic example a button that does something when you click it. In your React component you might have some JSX like this:

function App() {
  return (
    <div>
      <h1>My React App</h1>
      <button>Do Something</button>
    </div>
  );
}

Right now if you view this in your browser you’ll see a button that says “Do Something” but it doesn’t actually do anything when clicked. Let’s change that.

Handling the Click

In React elements like <button> have special props (short for properties) that accept functions. These functions get called when certain events happen. For a button we use the onClick prop:

function App() {
  function handleClick() {
    console.log("Button clicked");
  }

  return (
    <div>
      <h1>My React App</h1>
      <button onClick={handleClick}>Do Something</button>
    </div>
  );
}

Here’s what’s new:

1. We defined a function called handleClick. This function just logs "Button clicked" to the console.
2. We passed handleClick to the onClick prop of the <button>.

Now, every time you click the button in your browser you’ll see “Button clicked” in your browser console. Cool right?

Remember: Pass the Function, Don’t Call It!

One common mistake is to write onClick={handleClick()}. This is wrong because it calls the function immediately not when the button is clicked. Always pass the function itself (handleClick) not the result of calling it (handleClick()).

Moving On: Form Submissions

Next let’s handle a form submission. Forms are a big part of many web apps so this is important!

function App() {
  function handleSubmit(event) {
    event.preventDefault();
    console.log("Form submitted");
  }

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

Here’s what’s happening:

1. We have a <form> with a text <input> and a submit <button>.
2. Our handleSubmit function gets an event object. We call event.preventDefault() to stop the form from refreshing the page (the default behavior).
3. We pass handleSubmit to the onSubmit prop of the <form>.

Now when you submit the form (by pressing Enter or clicking the submit button) you’ll see “Form submitted” in the console and the page won’t refresh.

Quick Tip: Naming Conventions

In React event handler props usually start with on like onClick or onSubmit. It's a good habit to name your handler functions starting with handle like handleClick or handleSubmit. This makes your code easier for others (and future you) to understand.

Handling Input Changes

Let’s add one more piece: handling changes in an input field.

function App() {
  function handleTextChange(event) {
    console.log("Input value:", event.target.value);
  }

  return (
    <div>
      <h1>My Form</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" onChange={handleTextChange} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Here’s the new stuff:

1. We added onChange={handleTextChange} to the <input>.
2. handleTextChange gets called every time the input value changes (like when you type).
3. event.target.value gives us the current text in the input.

Now every time you type in the input you’ll see the current value logged in the console.

Inline Functions: Another Way

You don’t always have to define your functions separately. You can use inline arrow functions:

<input type="text" onChange={(event) => {
  console.log("Input value:", event.target.value);
}} />

This does the same thing as before but it’s all in one place. Use whichever style you find clearer!

Passing Functions to Custom Components

As your app grows you’ll create custom components. Let’s say you have a Form component:

// Form.jsx
function Form({ onSubmit }) {
  function handleSubmit(event) {
    event.preventDefault();
    onSubmit();
  }

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

// App.jsx
function App() {
  function handleSubmit() {
    console.log("Form submitted");
  }

  return (
    <div>
      <h1>My App with Form</h1>
      <Form onSubmit={handleSubmit} />
    </div>
  );
}

Here’s whats happening:

1. App has a handleSubmit function.
2. We pass handleSubmit to Form using a prop called onSubmit.
3. Form uses onSubmit in its own handleSubmit function, after calling event.preventDefault().

This way Form handles the form mechanics but App controls what happens on submission. It's a great way to keep your components reusable.

Wrapping Up

And there you have it You’ve learned how to handle button clicks form submissions and input changes in a React app. Remember these key points:

1. Use props like onClick and onSubmit to handle events.
2. Pass functions to these props, don’t call them.
3. Functions can use the event object for more control.
4. Name your props onSomething and functions handleSomething for clarity.
5. You can pass functions to custom components for flexibility.

With these basics you’re well on your way to creating interactive React apps. Next up learning about state to make your apps even more dynamic. Stay tuned and happy coding!