4.10 addition of link bidirectional

In this short lesson we add a two-way binding on every input of the new expense form. So far the inputs only emitted changes through onChange; now we also want the value displayed inside the input to come from React's state. To do that we use the built-in value attribute available on every input element.

Binding state back into the inputs

  • On the title input, add value={enteredTitle} next to the existing onChange.
  • On the amount input, add value={enteredAmount}.
  • On the date input, add value={enteredDate}.
<input
  type="text"
  value={enteredTitle}
  onChange={titleChangeHandler}
/>

This is exactly the two-way binding pattern: we no longer only listen to changes in the input to update our state, we also feed the state back into the input. It might look like an infinite loop but it is not — React only re-renders when state actually changes.

Then, after the console.log(expenseData) inside the submit handler, we reset the form fields by calling setEnteredTitle(''), setEnteredAmount('') and setEnteredDate(''). Because of the two-way binding, clearing the state automatically clears the inputs on screen. This is another key React concept, and it is especially useful when working with forms: you can both collect user input and programmatically modify it from your code. See you in the next lesson.

Summary

This lesson demonstrates how to implement bidirectional binding in React by adding the `value` property to input elements. The bidirectional binding creates a two-way connection: when the component state updates, the input value changes, and when the user modifies the input, the state is updated accordingly. This pattern is essential for working with forms, allowing developers to both collect and manage user input dynamically.

Key points

  • Add the `value` property to input elements to bind the component state to the input
  • Bidirectional binding ensures the state updates when the user types and the input updates when state changes
  • This pattern prevents infinite loops by maintaining a proper flow of data between state and UI
  • You can apply the same binding pattern to multiple inputs (like title, amount, date)
  • Bidirectional binding is a core React concept that simplifies form handling and user input management

FAQ

Why do we use bidirectional binding instead of just listening to input changes?

Bidirectional binding allows you to both collect user input AND programmatically update the input value from the component state, giving you full control over the form's data flow.

Does bidirectional binding cause infinite loops in React?

No, React handles this correctly by distinguishing between state updates from user input and programmatic updates, preventing infinite loops as long as you follow proper binding patterns.

What are the practical benefits of bidirectional binding when working with forms?

Bidirectional binding lets you easily validate input in real-time, reset form fields programmatically, and maintain a single source of truth for all form data in your component state.