So very nice in all of the work you've done so far and in this guide, we are gonna finish all of that up. So, we are going to update the styles for our image uploaders and I'm gonna show you an optional way of doing it, it's completely up to you, this is your portfolio.

You can have it look however you wish but I'll show you how we can update the styles for our image uploaders we're gonna update the style for our save button and then lastly, I'm gonna show you how you can use child components for our DropzoneComponent to be able to update the content.

Because right now it's kind of a secret on which one of these image uploaders is the thumbnail, which one is the logo and which one is the banner, so it'd be very helpful to be able to override these values and I will show you how to do that and you'll get to learn a little bit more on how to work with child components.

So, let's get started. I'm gonna open up Visual Studio Code and let's start with updating the styles for those image uploaders. If you scroll down, you can see inside of the JSX the image uploaders have two classes. They have image-uploaders and then they have this three-column class.

I'm gonna leave it up to you, if you wanna be able to use the generic three columns that we created, or if you want something more specific. So, let's walk through what you since you already have the one that stretches all the way across, let's walk through how we could customize this.

So, I'm gonna get rid of those three columns, and then I'm going to create a class called image-uploaders. So, let's open up the portfolio-form styles and then underneath the include, I'm going to call image-uploaders which is nested inside of the portfolio-form-wrapper and say display: grid and now I want to have a different set of three columns, so I'll say grid-template-columns but instead of just 1fr, 1fr, 1fr, now let's go 200 pixels, 200 pixels and 200 pixels with a grid-gap of 21 pixels, hit save.

Now you'll be able to see that this is now perfectly aligned and these are all smaller. It's completely up to you if you wanna have this or if you wanna have the image-uploaders stretching all the way across but that is how you can override those values.

Now, one other item I want to mention and this is a very helpful point of refactoring, you notice how many times we've typed display: grid and then grid-gap: 21 pixels. It's been quite a bit and so, what I think this is a great opportunity to do is a very quick refactor. If you open up mixins, let's just create a base grid mixin here.

So, I can just say mixin base-grid and now inside of here I'll say display: grid and then grid-gap: 21 pixels and remember, just like any mixin, you can always override these values, just like we overrode the margin-bottom value here for our input-element, you could do the same thing, so don't worry, you're not locked into using that same grid-gap that when you find yourself using it over and over again, you could use it like a default value.

@mixin base-grid() {
  display: grid;
  grid-gap: 21px;
}

So, now with that added in our mixin, now we can call it from each spot. So, inside of image-uploaders, now I can get rid of display: grid and grid-gap and here I can just say include base-grid, call it just like that and then I can do it here at the top as well and get rid of display: grid and the grid-gap: 21 pixels, so we've called it twice there.

If we open up our grid, we can call it three times, so here and I need to, I lost it on the clipboard, so I have to type include base-grid and now I can get rid of each one of these other items and we're not using three-columns anymore, so we can get rid of that class entirely and copy over include base-grid one more time, hit save.

grid.scss

.one-column {
  @include base-grid();
  grid-template-columns: 1fr;
}

.two-column {
  @include base-grid();
  grid-template-columns: 1fr 1fr;
}

Now if you come back, everything is exactly how it was before but we were able to shrink down our code by quite a bit and now if we ever wanna make a change to that base grid, it can populate everywhere else on the site that we called it, so that is usually a good idea.

So, now that we have that, let's go and let's update the button. So, that will be relatively easy since we already have a button class. So, if we come down here, all we have to do is inside of the button, just give it a class name of button, hit save and now you can see we have our nice button with our nice hover effect.

So, all of that's looking really good. The only thing we have to do and it's our last item is update our labels inside of each of our image uploaders with child components. So, switch to Visual Studio Code one more time and then there is a very cool way that you can do this, so we've talked about child components a little bit.

Technically every one of the components we've worked with besides the app component is a child component. So, everything is nested inside and if you open up the React tools, you can actually visualize it, so if you open up React, you can see right here where it says Provider, then BrowserRouter, Router, and then App and so, technically App is actually even a child component of Router, BrowserRouter and then Provider, every time we go down to a different level of nesting, each of these is a child component.

We're taking a component and sliding it inside of the parent component and so, many times when you need to customize the behavior of a component, you will pass in props like we have done quite a bit but you also may find that they give you the ability to open up that component and actually pass child components indirectly and so, that's what we're gonna do to add these labels.

If you right-click on this and click Inspect, I wanna show you something kind of cool 'cause this is how I discovered it, so this is how I learned how I could override those values. So, do you see right here where it says drop files here to upload and it's regular span tag?

If you look inside and this is inside the HTML, we have this dz which is short for Dropzone, default and then dz-message. What this tells me is that we have these divs that are autogenerated inside of Dropzone but what we're able to do is open the component up and override the default values.

Now, you can't do this with everything, the person who created the library has to make this available but in this case, it will work and so, this is pretty cool. We're gonna be able to open up the DropzoneComponent and then slide in our own message and that is a child component, we're gonna pass a child component to it.

So, if I come into Visual Studio Code, inside of DropzoneComponent, instead of it being a self-closing tag, get rid of that slash and then the greater than sign, so it's just the greater than sign and then close it off, so say DropzoneComponent, so just like you would. If that looks weird, it's just like a div, we had a starting div and then we needed a closing div tag, so now we've added a closing DropzoneComponent tag and now what we can do is pass in a child component.

In this case, we're just gonna pass in a child div. So, here I'll say div with a className of that class name we saw when we inspected the code, so I can say dz-message and here we're going to say this is for our thumb, so I'll say Thumbnail and then close off the div. And if you hit save here, and come back, you can see that this now has overridden the default value, by default it says drop files hereto upload.

So, this is passing in directly into that component's children and you may think that I'm spending a long time on this but it is because even though this may seem simple, this is actually a really cool, very powerful part of React and the more advanced you get with your development, the more you're gonna be using child components and let's just take another look at the Inspector here.

And so, one, look at what got passed in. Notice that now we have instead of that dz-default, now it just says dz-message with what we passed in.

And then if you open up the React kit right here, you can see that we now have children. Do you see that? That's pretty cool. So, we had this component, and now it has this child component of the thumbnail, so we have our image uploaders, we have all of these different DropzoneComponents and then inside of here, we actually have the ability to pass in a child component.

I don't wanna belabor this too much, just know that we have the ability with certain libraries to be able to open them up and to be able to pass data in like we are doing right there and technically we've been doing this the entire course but if you're looking to get a React development job, a very common question might be what is a common use case for being able to pass in a child component into a parent? And you could give this exact example right here and it'd be a great answer.

Say that oh I was working with the Dropzone library, I needed to override the label value, so I opened up the component and I passed in the message or the label as a child component and that'd be a great answer to that question. So, let's do that now with the other two that we have here, so make sure, you can copy this, make sure you get rid of that self-closing tag and then close off with DropzoneComponent and then do the same or make sure you change the name, so this one's Banner and then let's do the same thing for the logo.

Make it not be a self-closing tag and then DropzoneComponent, hit save and now we should be good. Coming back, now we have Thumbnail, Banner, and do have to change that, Banner and Logo, okay, so now we are all good.

Let's do one final test to make sure we didn't have any syntax issues or break anything. So, say final test and the URL can be anything, position can be anything, any of these can be any value that you want. Make sure you're uploading images to test out this part.

I always keep a few sample images that are pretty small files that allow me to just grab them, upload 'em and then work with 'em that way and I double-clicked the maximize, there we go. So, these are all of the elements we're looking for, everything looks good here.

If I hit save now, it looks like everything is been uploaded, yes, everything got uploaded, it got pushed over here and the form got cleared out and now our form looks much better than it used to be, so great job in going through all of that, I know that was a lot of content.

Don't worry, as you learn React, as you build out more applications, it doesn't take this long to build out a simple form but what we've done here is not only have we learned how to build a form but we've learned just a ton of key concepts in React along the way, so very nice job in going through that.

Now that we have the ability to create new records, the next section is gonna be focused around how to build the ability in to edit records and to delete records and so, I look forward to going through all of those guides with you.

Resources

• Source Code