Current section: Inputs 59 exercises
Problem

Default Value

Loading exercise

Transcript

00:00 We're going to talk about default values now. And you might just think, oh, well, like HTML allows you to set a value attribute on elements. And yes, that absolutely is the case. But because React is catered specifically to building UIs that are dynamic,

00:19 you can actually dynamically change the value of an input. So let's take a look at the username field here. If I select that with the $0 and I say value equals Kent C Dodds, then we're going to programmatically update that value. And you'll notice the attribute doesn't get set here.

00:36 I can add an attribute that's a value of whatever. And that does not update here. So that's one of the aspects of the way that the attributes and props work, is attributes are like, this is the initial when this HTML is turned into DOM nodes. Here's the configuration for creating those DOM nodes.

00:56 And after that point, now those values kind of can get lost. That's not entirely accurate, but that's kind of the way that I think about it. It's like properties are the dynamic bits. And so because React allows you to be dynamic with some of this stuff, if you just set a value prop,

01:14 then React will just make sure that it never changes from that value. So that way, you can programmatically change that value, and React will keep things up to date with it, whatever that value prop's value is. So for this reason, if you set a value prop on an input, then React will not allow the user

01:33 to change it, which I suppose that makes sense. But yeah, it's a bit of a like, wait, what? So instead, if you just want to say, hey, I want to initialize this to a certain value, but thereafter, the user can change it, then you use the default value prop. And if you look for the default value on MDN,

01:52 you are not going to find it. This is not a thing that's part of the web spec or anything. Default value is a React feature. And so your job is to use the default value as appropriate for several of these different inputs. That makes sense. Not all of these are default value.

02:11 You also have default checked for the radio and checkbox as well. So the other thing to keep in mind is that you have to make sure that the format which you use for the default value matches the format of the value when you actually read it. So yeah, for the date in particular,

02:31 you're going to need to do something like this. And another thing to consider is that things will be coerced into a string value. So yeah, files are the other type of value that fields can have, but you can't have a default file value. And so yeah, everything's going to get coerced into the string,

02:50 the formatted string that needs to be set for the individual field. So if you pass a number here, that's why it's the same as passing a string version of that number, because it's just going to two-string that number and it works out. So I think I've said plenty. Now it's a good time for you to jump into it,

03:09 and we'll see you when you're finished.