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 elements as stateless; an input element has a
value prop and an
onChange prop, and together these things give you total control over the input without ever having to touch the DOM.
Let's look at a simple input field:
Every time we
input, we pass the current value from our component's
state. Every time the user types in the input field, we update
state to include the new value, which triggers a re-render. This essentially keeps the DOM synced up to our component
state automatically. We can control the value of the input field however we'd like, 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