The Road to React: The One with Hooks/

...

/

Handler Function in JSX

Handler Function in JSX

Learn to use onchange handlers with a React component's JSX.

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.

Press + to interact
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 ...