- Read Tutorial
- Watch Guide Video
Some of them are gonna be review and are gonna be similar to the types of work we've done with forms so far in the course, but then others are going to be new, such as building a form object and uploading images, and so, with that in mind, I'm going to try to take a very methodical, very step-by-step approach, I'm gonna try to break each one of these videos into as small of a chunk as possible so that it is easy to follow along with.
So, now that we have that in mind, let's talk about what we should do first. I think the very first thing we need to do is to create a portfolio form component, and then call that from the portfolio manager so that we can at least make sure that we're calling it properly. So that's all we're gonna do in this guide.
So, right here we have just this placeholder that says Portfolio form, so let's move that directly into a portfolio-form component. So switching into the code, I'm gonna go and open the portfolio-manager component, and you can see right now, we are just hard-coding this h1, so let's go and create that new file.
So, inside of the portfolio directory, I'm gonna create a new component called portfolio-form.js, and then, from here, let's create a class component. And the reason why this has to be a class component is because we're going to be updating state.
A good rule of thumb is, whenever you're working with forms, specifically forms that are going to have some form of state associated with them, then you need to use a class component. So this is gonna be called PortfolioForm, and inside of here, let's just put a couple of lines, just to make sure it's all working. So PortfolioForm h1 and let's just duplicate that to make sure that we can call this properly.
Then from the portfolio-manager.js, instead of calling PortfolioForm, let's call the Portfolio, or, instead of just hardcoding it, let's actually call the component itself, and then we need to import it here at the top. So I'm going to import PortfolioForm from, and then it's going to be from the same path with just a different filename.
So I'll say, from "../portfolio/portfolio-form";, just like that, and hit save, and now let's confirm that that is working, and you can see, yes, we are getting both of those h1 tags. So we've now created a portfolio form component, and we've called it from the parent component, and let's do the initial setup in the parent component since we went through that pretty quickly.
We know that we're going to need to update this portfolioItems state. So, if you remember back to the behavior we're looking for, what we wanna be able to do is to add all of these items, so add a new portfolio item URL, all of those kinds of things, and then when you hit save, if it saves successfully, then we want to automatically push that entire wrapped-up item directly on top of these other ones.
And so that is the behavior we're looking for. That is the reason why, in our application, we have this portfolioItems state right here, so that we can work with it, and so whenever that form gets submitted, then we want to simply tack on a new item. And so, in order to do that, we're gonna have to do what we've done before, which is to pass a function as a prop.
So we're gonna build a couple of handler functions. For right now, they're just gonna be placeholders, and so let's create them right now. We're gonna handleSuccessfulFormSubmission, and that's gonna take in, we know it's gonna take in a portfolioItem.
And then, inside of here, let's just place a TODO, and then we'll take care of it, later on, so we want to update the portfolioItems state, and add the portfolioItem to the list, and this is the process that I'm typing out right now, and that you're watching, is literally the exact process that I would use if I were simply sitting at my desk, and building out a React application, this is exactly what I do.
I'd look at the parent component, I'd see what needed to be there, and instead of trying to do all of it at one time, 'cause that can be very intimidating, and it can lead to things like procrastination, and it can also lead to a lot of very confusing bugs, I like to write as small a set of code chunks as possible, and I like to write a lot of instructions just to myself, just to let myself know the next steps that need to be done.
The other thing that I like to do, and this is something you'll see in quite a bit of, quite a bit of developers do this, is to write TODO like this, and the reason for that is because a very common thing for me is to write these TODOs for myself, and then I can copy the TODO code like this, and then perform a full search throughout the application, and then see every file where I've written a little note to myself.
That's nothing specific with React, that is simply a nice little way that I have found that helps me to be productive and know exactly what parts of the application need work. So, with all that aside, let's keep going.
So we have this handleSuccessfulFormSubmission, and let's also just take care of an error. So I'll say handleFormSubmissionError, it'll take in an error, and then for right now, we can just console.log out the error, and I'm going to make sure that I put in where that's coming from, and then print out the error itself.
And then, once again, just so we don't forget to do that, let's bind that to the component. So here, I can say this.handleSuccessfulFormSubmission equals this.handleSuccessfulFormSubmission.bind(this), and then let's also do that for the unsuccessful case, for the error case. So this.handleFormSubmissionError equals this.handleFormSubmissionError.bind, and then pass in this.
Once again, we're simply connecting this function and tying it directly into the component so that it has access to this, and so that we can pass these functions directly into our component. And now inside of our PortfolioForm, let's go, and let's add each of these in.
So, here we can pass in the handleSuccessfulFormSubmission, have that set to equal this.handleSuccessfulFormSubmission, and then create the error case, handleFormSubmissionError equals this.handleFormSubmissionError. Okay, so I know that was a decent amount of code, and nothing that we've done is actually building the form itself, but what we're doing is giving ourselves the initial structure, and we have actually built out the majority of the code that this PortfolioManager is going to need.
Remember, the goal, and the role, of this PortfolioManager, is more like a traffic conductor. So instead of it performing a large number of tasks, it actually just makes sure that everyone else is doing their job. So it makes sure that when the portfolio form goes and it creates a new record, or it edits a record, it's going to take that data, and then it's going to perform an update, and then from there, it's gonna tell the sidebar list what to do, and then the sidebar list is gonna go, and it's gonna take care of its own responsibility.
So, what we're doing here is setting up the structure for all of that so that we're able to make sure that each one of the components is handling its responsibilities properly. So, now that we have all of that done, in the next guide, we're gonna start building out the portfolio form.