Search⌘ K
Home
Courses
The Road to React: The One with Hooks

Handler Function in JSX

Explore how to create and use handler functions in JSX to respond to user input events in React components. Understand synthetic events and how to properly pass functions for event handling, enhancing interactivity in your React apps.

We'll cover the following...

The App component still has the input field and label, which we haven’t used. In HTML outside of JSX, input fields have an onchange handler. We’re going to discover how to use onchange handlers with a React component’s JSX. First, refactor the App component form a concise to block body so we can add implementation details.

Node.js
const App = () => {
  // do something in between
  return (
    <div>
      <h1>My Hacker Stories</h1>
      <label htmlFor="search">Search: </label>
      <input id="search" type="text" />
      <hr />
      <List />
    </div>
  );
};

Next, define a function – which can be normal or arrow – for the change event of the ...