Controlling Form Values with React
There are many situations where you want to programmatically control the value of a form field. Maybe you want to set the value of one field based on the user’s interactions with another element. Or maybe you want to change the user’s input as they’re typing it. In this example, we’ll be preventing the user from typing upper case characters into our field by turning our input from an “Uncontrolled field” to a “Controlled field.”
You can learn more about Controlled fields and components from the React documentation.
Kent C. Dodds: [0:00] It's great that we're able to display an error message if there's an uppercase character and we disable the submit button, but it would be even cooler if we didn't allow the user to type uppercase characters in the first place.
[0:11] If they try to type an uppercase character, we just lowercase it for them. We could do that pretty easily by saying setUsername.toLowerCase. Now, the username that's stored inside of our state is going to be lowercase so we can do uppercase forever. When we hit submit, that's all going to be lowercase.
[0:32] It's not exactly a great user experience to be able to type something here and have the end result be different from what I submitted. What we need to do is control the input value to be exactly the same thing that I have in my state because I'm programmatically changing the value that I get from the input to set the value that I store in my state.
[0:52] If I want to keep those two in sync, then I need to control the input's value. To do this is pretty simple, we simply add a value prop here and we'll pass in the username.
[1:03] As soon as we pass this value prop on to an input, we're communicating to React that React no longer needs to manage the state of this input. Now we are going to control that state and it should not change that value to anything other than what we enter in here which includes whatever the user's typing.
[1:22] If I saved this and I come back up here and I try to type an uppercase string, that's not going to work. It's going to lowercase my string for me automatically. Now, it's impossible for me to type something that's incorrect. It might be useful to have some sort of info thing here that indicates why I can't type uppercase characters in here.
[1:42] Hopefully, you get the general idea that if you ever need to make the input value something different from what the user is actually typing, then you can do so by passing a value prop. Let's go ahead and clean some stuff up here because we no longer need to display an error because it's impossible to make an error now.
[1:58] We get rid of that submit here. We'll get rid of the isLowercase and error right here, and we can save that and everything looks great. You can't tell but I'm holding down the shift key. I promise I'm trying to type something uppercase.
[2:12] The value in the input isn't uppercase because I'm setting the username to a lowercase version of what's being typed in that input's value. Then when React re-renders this component, the username which is all the lowercase characters is getting passed into the value of the input and React is sending that input's value to the lowercase version of what it was.