4.5 listen slow to solve

In this lesson we start listening to user input in the form. Go back to ExpenseForm and find the <input> for the title. We attach an onChange attribute on it, which React fires every time the value of the field changes — that is, on every keystroke.

Below the const ExpenseForm = () => { declaration we add a new handler called titleChangeHandler. As always with React event handlers, we use the arrow function form. The handler receives the synthetic event as its parameter, and the actual text typed by the user is available on event.target.value. 

const titleChangeHandler = (event) => {
  console.log('Title change!');
  console.log(event.target.value);
};

return (
  <form>
    <input type="text" onChange={titleChangeHandler} />
    ...
  </form>
);

What to watch for

  • The attribute is onChange (camelCase) — not onchange.
  • We pass the handler by reference (onChange={titleChangeHandler}), we do not call it ourselves.
  • Inside the handler we now read event.target.value instead of any hardcoded string.

Save the file, open your browser's console and start typing into the title field. Each keystroke produces a new "Title change!" log followed by the current text of the input — proof that React is correctly forwarding DOM events into our component. A small reminder from the previous lesson: do not forget to copy the CSS into ExpenseForm.css if you haven't already. See you in the next class.

Summary

This lesson teaches how to implement controlled form inputs in React by setting up an onChange event listener on a text input field within an expense form. By carefully listening to change events and logging them with console.log, you can debug and understand how user input flows through your component state. The lesson emphasizes extracting the input value via event.target.value and properly connecting it to your form's CSS styling.

Key points

  • Add an onChange handler to text input elements to listen for user changes
  • Extract input values using event.target.value to capture user input data
  • Use console.log strategically to trace and debug state changes in real-time
  • Connect event handlers to your form component's state management architecture
  • Ensure proper CSS integration with your expense form component for styling consistency

FAQ

What does the onChange handler do in React form inputs?

The onChange handler listens for input changes and triggers a callback function each time the user types, allowing you to capture and update the component's state with the new input value via event.target.value.

Why use console.log when implementing event handlers?

Console.log helps you verify that your onChange handler is firing correctly and that you're correctly capturing the input values, which is essential for debugging form implementation issues.

How do you connect the input handler to your form's CSS?

After implementing the onChange logic in your component, ensure your CSS file (like expense-form.css) includes styles for your input element to complete the visual and functional integration.