Traditionally in web development, user input is stored in the DOM, and the data (e.g. what the user typed in the input field) is extracted from the DOM to use in the application logic. React dramatically simplifies input handling by treating input components as stateless; an input element has a
value prop and an
onChange prop, and together these things give us complete control over the input without ever having to touch the DOM.
Let's look at a text input field:
Every time we render the
input component, we pass the current value from our component's
state. Every time the user types in the input field, we update
state to store the new value and re-render our
This keeps the DOM in sync with our
state variable automatically. Using this approach we can manipulate the value of the input field as a regular variable, while React handles the DOM operations for us behind the scenes.
For accessibility, it's best to include labels for input elements. Read more about accessibility in React here.