So, let's step through what we need to do. I'm gonna go to DevCamp Space, and so we're wanting to add to this list, so every time we create a record, we want it to add there, which will obviously populate every other part of our application.

And if you click on the portfolio name, or the logo right here, you'll see the API endpoints. We've used the GET to get all items, and for one item, and now we're gonna use the host. So it's even telling us the verb that we wanna use, so we're gonna use the post-action to create an item, and we have the URL right here.

So I'm going to copy this URL, and yours is going to be nearly identical. The only difference is that your sub-domain will be there instead of my name. So now, let's switchback, and let's go into the code. So I'm gonna go to Visual Studio Code, and this is gonna be inside of our portfolio form, inside of handle submit. So at the very first line, I'm going to just add my URL as a comment so that I can access that later.

And, I'll give us some space. Now we know we're going to call an API, so we need to make sure we're importing Axios, so let's do that at the very top. So we'll say let's import Axios from Axios, and then, down below, now let's start building out our actual create call.

So I'm gonna say Axios. and this is the post action, and we want to have this full URL there. So I'm gonna cut that, and inside of a string, I'm going to put that as the first argument. Now the second argument is going to be our data, which we know is going to be what we already have here with this.buildForm.

So also cut that, make sure not to bring in the semicolon, or else that will cause an error. So that's gonna be the second argument. And then, for the third argument is gonna be an object, which we're familiar with, with credentials true.

Now let me hit save... get rid of the semicolon, hit save, and then it'll be formatted for us, so we can break this down.

portfolio-form.js

handleSubmit(event) {

  axios.post(
    "https://jordan.devcamp.space/portfolio/portfolio_items",
    this.buildForm(),
    { withCredentials: true}
  );

  event.preventDefault();
}

We have axios.post, we're passing in the first argument, which is the API endpoint, the second argument is the form data, so when we call this.buildForm, it's gonna call this function up here, it's going to add in all the data from state, and it's gonna return the form data object, and that's gonna be what gets sent up in the form, and then we're passing in with credentials.

The reason why we're doing this is the server has to recognize who this is coming from, or else it's not gonna let you post this data up. Okay, so that is everything we need to create it, but as with all of our other Axios calls, remember we're getting passed back a promise, and then we need to tell the system what to do when the response comes back.

So, then I'm gonna call then, and this is gonna give us the response. Call an arrow function and, for right now, let's just console log that out. Remember, later on, we're going to update the parent component so we can populate our sidebar. But for right now, I'll do console log, response, and just print out the response.

And then let's also catch any errors, so I'll catch error and same thing, console log the, and then this case, let's put in just in case this happens, later on, we can say this is the portfolio form handle submit error, then that's all we need to do there. Eventually, we'll also pass up any errors, if they occur, to the parent component.

But for right now, I think that is all that we need to do, so let's test this out. Switching over to Google Chrome, I'm gonna clear this out, and you can type anything you want. So I'll say demo portfolio item, and then you can type anything you want in the URL position, category, and description. The only reason I have auto-complete here is just because any other form I've ever had with those same name properties allows me to just type the auto-complete, and it'll update it.

So now that we have all of this, let's first go to DevCamp Space, I'm gonna go to portfolio items, go down all the way to the bottom. You can see the last one is an ID of 127 named Ministry Safe. So we should have this demo portfolio item at the very end of it, after this.

So I'm gonna click save. Now, notice nothing clears out here, we need to build that functionality in, but we did get a response back, so let's take a look at that. We have this response with data, and inside of data, we have a portfolio item. And look at that, we have our category, we have our description, we have an ID that was generated automatically. We have the name position and URL, so all of the data that we sent up is now live.

So if I hit refresh here, you can see that we have each one of those items. So, I'm gonna copy that demo portfolio item, because I want to show you something here in a second. And now let's hit... let me clear the console out, hit refresh. And, if you scroll all the way down to the bottom, you can see we have a demo portfolio item. So this was created.

It wasn't automatically updated, we need to have the parent component, our portfolio manager, take care of that. But that is there, and it is in working order. So, a fantastic job if you did that. Now let's go to the home because this should also be popping up here. And you can't see anything, but it is right here.

So it's white because we don't have any kind of background image or anything like that, but it is populating. So, that is working very nicely. We have our entire portfolio form, now, being able to send data to the API, it stores it in the database, and then it gets added to the collection.

Now, I'm gonna remove that one, and the main reason is because it doesn't have any images, and it's not part of my personal portfolio, so it doesn't make any sense to keep it in there, so I can click the red X to remove it. Now, it will be removed from here. And now that we have that in place, we know that it is creating records. We can keep on building out the rest of the functionality.

Resources

• Source Code