Controlling input with state

The TextField component can be controlled by the React component, state, just like regular HTML text input elements. As with other types of form controls, the actual value is often the starting point—the state for each form control grows more complex as more functionality is added.

How to do it...

Just like any other text input element, you need to provide the TextField component with an onChange event handler that updates the state for the input. Without this handler, the value of the input won't change as the user types. Let's look at an example where three text fields are rendered and they're each controlled by their own piece of state:

import React, { useState } from...