00:00 We're not going to be making any user experiences differences here, but we are going to be making a number of developer experience differences here. We're going to change this to images and that's going to be a Z-array of the image field set schema. Then that means that this is now going to be images,

00:18 and this is now simply images. Hooray. We're full circle. We're now just here all the images. That's awesome. Then down here, we're going to rename our default value from image to images, and that's all of our images. But we've got one little interesting thing here,

00:35 and I will actually show you that once we get to that point, the reason that problem exists. So we'll come back to this. So then we need to make a field set list. So let's create that image list from use field set list, which comes from a Conform to React.

00:54 We'll pass our images config there, and this is going to complain because we need to provide our form ref to associate the list with the form that it's rendered in. So we already have a ref that is created for us by the use form hook. So we can simply pass that one,

01:12 form.ref, and we're all set there. Then down here, we're going to render our image chooser inside of a UL. So we're going to have a list, so you need a UL based on that image list. So we'll say image list.map,

01:30 and that's going to go right here. Then of course, we're going to want this inside of a UL to make that an actual list. Then our config is going to be the image itself. So that image list is actually just an array of configs. Then of course, we want to have a key,

01:50 and for our key for this, we're going to use the image.key. So this is something Conform anticipated for us that we would need a key. So Conform handles that for us. With that, we can also do a little bit of styling.

02:08 So I'm going to actually grab this. We're going to cheat just a little bit to make it look nice. Then we're going to change this from image to images because that makes sense. We have nothing here. Now, I want you to stop really quick and think about, why would we have nothing?

02:25 So if we're loading up this basic Qualifax note, you notice there are no notes. So when I edit it, there are no images to update. So if we come back up here to our image, where we're creating that image list, we're saying that's based on the config for our images.

02:43 But the default value is that we have no images. So this is going to be an empty array. Our image list will also be an empty array. That may make sense. Once we add the add and remove button, then we can add and remove these configs of the image list.

03:02 But for most of the time, I think users are probably going to want to have at least one image that is just there, and they can just say, okay, let's add an image here, and then we'll add more if we want to. As far as our product manager is concerned, that's what we want to do. So what we're going to do is we'll say,

03:22 if there's a length of images, then yeah, sure, the default value is this. Otherwise, we'll just default it to an array with an empty object, so we have an image all ready to go that the user can select right from the get-go. And so boom, now we can select an image,

03:40 and we've got cuddling, and we'll submit that, and boom, that's all still working. So the same thing that we've had the whole time, that's still working. The user experience is exactly the same, but now we have this field set list that allows us to render a bunch of different fields and an array of fields.

03:59 And so in this next step, we'll be able to actually have an add and remove button for this experience. So this would be sweet. But let's just really quick review what we did. We have this image field set schema. We didn't change that at all. We changed image to images and made this an array of those images of that schema.

04:19 And then we destructured images and passed that along as is to our update note. And then we updated our default value accounting for the fact that our notes may not necessarily have an image. We made a field set list

04:35 that will just create an array of the image config for every image that we have. And then we iterate over those inside of this UL so that we can have as many image choosers as we have images. And everything is still working.

04:53 So we're ready for the next step. Let's get going.