A text input lets the user type a name and displays it below. The input is frozen — nothing can be typed into it.
Clicking into the input and typing produces no visible change. The displayed name never updates.
Look at what's on the input element — is everything React needs to manage it actually there?
Look at what's on the input element — is everything React needs to manage it actually there?
Why this fixes it
A controlled input with a value prop but no onChange handler gives React nowhere to send the user's keystrokes, so React rejects every change and holds the field at whatever value state holds - in this case, an empty string forever. Adding onChange={(e) => setName(e.target.value)} routes each keystroke into setName, updating state with the new value on every change event. React then re-renders the input with the fresh state value, which is how the controlled input contract works: React owns the value, and onChange is the channel through which the DOM reports what the user typed.