However, if you were to click save, it would not update the record. Instead, it would actually go and create a brand new record with all of those values which obviously is not what we want to occur so how can we fix that? Well, let's go down and see why it's still creating a record.

If you go into the function right after build form where it says handle submit. Right now it's creating a post request, it's calling Axios.post and then it's calling the API endpoint to create a new record and take in all of that data from build form and that's exactly what it was meant to do, that's what we built it to do.

However, we can actually look at Axios's documentation and see that Axios is pretty flexible and we're gonna be able to reconfigure this Axios request to be more flexible and to be able to perform both create and update actions. And so if you go to the documentation for Axios, I have it right here, you can see that their most basic examples are very similar to what we've done such as calling Axios.get then passing in the URL that you want to go and retrieve data from.

And that is all perfectly fine and we've been using that and I still use that on a daily basis but if you keep scrolling down here, you'll see that you actually have the ability to configure Axios a little bit differently. So Axios, if you want, allows you to pass in the first argument instead of just being the URL, we can actually pass in the first argument of a configuration object.

That is going to allow us to have our form submission process be completely dynamic. See, you can pass in and say I want this to be a post request and so instead of calling Axios.post or Axios.get, what we're gonna be able to do is say, I want the method to be whatever the value is on the right-hand side of this configuration object.

Then the URL, our URL is gonna have to change so we're gonna be able to dynamically change the value of the URL and then we can pass in the data just like we have done up to this point. So what this is going to allow us to do is we're gonna add a few more elements in state.

Those state elements are gonna be able to keep track of the API URL, the edit mode and also of the method that we're wanting to follow here. Whether it's a post request or a what is called a patch request, that's what you use whenever you're updating a value. And so we're going to reconfigure our Axios so that it allows us to have that kind of flexibility.

So now that we know what we're gonna do let's actually go and populate this. We'll start with our base state, so at the very top right after logo, we're gonna add a few more values. So I'm going to say that we're gonna start in edit mode of false and we're not really gonna get into using this edit mode until one of the next guides but for right now I'm just gonna put it in there so that we can keep track of it and we don't forget about it.

So I'm gonna do edit mode false and then I'm gonna have the API URL and this is going to for our base state be the exact same URL that we're currently using in the form submit. So I'm going to just copy all of this and you're gonna have to copy your own 'cause you need to use your own subdomain and that is gonna be the base state URL and then from there, the API action.

And for the base action that's going to be post, because by default we're gonna have our form use the create functionality and then only if we're in edit mode is it going to go and is it going to switch to this update or this edit mode.

portfolio-form.js

this.state = {
  name: "",
  description: "",
  category: "eCommerce",
  position: "",
  url: "",
  thumb_image: "",
  banner_image: "",
  logo: "",
  editMode: false,
  apiUrl: "https://jordan.devcamp.space/portfolio/portfolio_items",
  apiAction: "post"
};

So let's now move down into our component did update and we're gonna add in a few more attributes here, make sure you add a URL, add a comma after the URL and then edit mode now is going to be true. So this is going to be the case where we pass in the portfolio to edit and so that's passing in, we're grabbing all those values and we're also going to update state, so edit mode is now going to be true.

The API URL is slightly different, everything is gonna be the same all the way to where it says portfolio_items and then here what we're gonna do is we're actually gonna use backticks so make sure you do that at the beginning here and also at the end. So you're gonna use backticks and then portfolio items slash and then dollar and then inside of curly brackets, id.

portfolio-form.js

this.state = {
  name: "",
  description: "",
  category: "eCommerce",
  position: "",
  url: "",
  editMode: true,
  apiUrl: "https://jordan.devcamp.space/portfolio/portfolio_items/${id}",
  apiAction: "post"
};

Now, remember we're getting this ID from the portfolio to edit, it's the very first attribute that we grabbed. It's something the API passes back to us and we always have access to. So this is the URL endpoint that we need to hit and the way that the APIs gonna know which record we wanna update is gonna be based on the ID that we pass in right here.

So that is gonna be our API URL when we're in edit mode and the apiAction here is not gonna be post, it's going to be patch, that is the HTTP verb for creating an update action. So now, whenever we click that little edit icon, it is going to update these values as well, so we're gonna have a different apiURL and a different apiAction.

So now with all of that in place, what we can do is come down into our handleSubmit here and I'm gonna get rid of everything up until where it says then. So I'm just going to get rid of everything right here and now I'm going to call Axios but instead of passing in a URL, what I'm going to pass in here is going to be first parens and then a set of curly brackets 'cause remember what we're passing is gonna be the configuration options.

So here the first ones gonna be method and so method is gonna be this.state.apiAction. So if there is not a portfolio record to edit, then this is simply going to be post, if there is, it's going to switch to patch. So I'm gonna say method and then the next one is just going to be URL. And that's gonna be this.state.apiUrl and then from there we need to pass in the data and this is gonna be the same as what we had before. So they'll be just this.buildform and it's a function so make sure that you call it with parens. And then lastly, we pass in with credentials which is true and that's how the API authenticates you.

portfolio-form.js

handleSubmit(event) {
  axios({
    method: this.state.apiAction,,
    url: this.state.apiUrl,
    data: this.buildForm(),
    withCredentials: true
  })
    .then(response => {
      this.props.handleSuccessfulFormSubmission(response.data.portfolio_item);

Okay, so now with all of this in place we're not done yet, we're gonna be done with this video, we're gonna wait til the next video to start populating data. So what's gonna happen is it's still gonna call this.props.handleSuccessfulFormSubmission so what is gonna happen here is it's actually going to make it look like we created a new one, but if you just refresh the page, you'll see that it did not duplicate an item it simply edited it.

So now let's go and let's go back to the portfolio, hit refresh. In between videos I created a demo item so that I'm not overwriting my current ones, so make sure that you do that so you don't change any of your current values. And so here the value says another one, if I click on edit, I'm gonna say testing edit process. None of the other values matter because we're not populating it and this is just a demo value.

So I'm gonna hit save and like you see, it goes and it populates right here. It treats it like a new record was added, we'll fix that in the next guide. But now if you refresh the page, you can see that it now says testing edit process, so this worked perfectly.

We're able to click on edit, we made the changes and then we hit save and as far as the API is concerned, we called the correct verb. So we called the patch, which means it's going to be an update action and we hit the right endpoint because we grabbed the right ID and it updated that name record for this particular portfolio item.

So let's just do a quick review before we end this video just to walk through what we did. So we created a new base state where we added an edit mode, an apiUrl and an apiAction. Now once again, we're not using the edit mode yet, we're gonna get into that in the next video but it's there and now we don't have to add it then.

The apiUrl is just the same one we've been using since we've been building out the new portfolio form, it's just that same API endpoint. Now I actually need to scroll up a little bit further, this is our base state. So edit mode's false in the very beginning and then the apiUrl is the same endpoint and then the apiAction is post.

Then from there, if a record is going to be edited. So if the portfolio to edit record is true, we're going to change those values, so edit mode is now gonna be true. We're changing the actual API endpoint that's being hit and we're making it a patch request instead of a post request. And so that is how we're able to dynamically change how we're communicating with the API.

Then from there, we altered our Axios call, so instead of calling one of the helper methods like Axios.post or Axios.patch, we instead passed in a configuration object where we were able to have a key value kind of setup where we have the method, the URL, the data, and then with credentials and then specifically the method and the URL can now be dynamic, we do not have to go and we don't have to create a completely separate function.

I've seen some people do that where they'll have handleSubmit for post and handleSubmit for patch and 90% of the code is all identical and that's really a poor practice. Instead, it'd be a lot better to have something like this where you can simply change a few values in the configuration object and then everything else remains the same.

So when we did that, everything worked perfectly. So in the next guide, now that we actually have the true functionality working. In the next guide, we're going to look at our edit mode and then we're going to pass different data up to the parent controller or to the parent portfolio manager component whenever a successful edit action is taken place compared with when a new form submission has taken place.

Resources

• Source Code
• Axios Documentation