So let's walk through exactly what needs to take place in order to do that. We know we have the portfolio-form.js right here and we're gonna get a response back whenever a new record is created. Right now we're just console logging it but this is gonna be the spot where we want to call our prop.

So if I open up the Portfolio Manager, come down here, you can see that we have this handleSuccessfulFormSubmission and this is a prop we're passing to Portfolio Form so we have access to it and it expects an argument. It expects a portfolioItem object, so that is what we're going to pass to it.

So I'm gonna copy this and go directly into this response block here and call this.props.handleSuccessfulFormSubmission and then from here, I'm gonna pass in the response.data.portfolio_item because we've seen that that is what gets returned when we have a successful record created.

.then(response => {
  this.props.handleSuccessfulFormSubmission(response.data.portfolio_item);
  console.log("response", response);
})

So we can hit save here and let's just console log this just to make sure it's working and yes, I did get rid of the console log here so now let's just make sure that this is working, so I'll copy that name and say console.log handle submission and let's make sure we're getting that portfolioItem.

So switching back to Google Chrome and opening up the console. If I just say something like test record and hit Save, that worked perfectly. So it called our handleSuccessfulFormSubmission, it passed in the portfolioItem, has an ID, it has a category or default category and then it has test record which is exactly what we added. So that is good, that's working perfectly.

So now that we know we have access to it, let's walk through how we can update state. So to review 'cause I know it's been a little while since we touched the portfolio manager, we have a default state of portfolioItems which is an array and then when the component mounts we're calling getPortfolioItems and we are populating that array.

Now how can we add to an array in state? You may think that we could simply call something like this.setState and then inside of here, we could call the name which is just to make sure, yes, so it's portfolioItems and then say something like this.state.portfolioItems.push and then push the portfolioItem.

And you might think that that would be the best way of doing it and if you did try that, you would run into an error and you would also be in good company 'cause when I was initially learning React, the first time that I tried to add to an array in state, this is exactly the approach I worked and this is a very standard process you'd build out in normal JavaScript.

But because of how React works in regards to state, we have to perform a little bit of a different process. So let me walk through exactly what this looks like so I'm gonna first make sure that our portfolioItem is brought in so I'm going to wrap this in square brackets. So what I'm essentially doing is I'm saying this portfolioItem, I'm gonna take it and I'm gonna place it in an array, so this is now an array with one item.

Then from there, I'm going to call a special method called concat. So concat is short for concatenation, it just means putting two things together, and so I'm taking this array and I'm concating. One nice benefit about this is it's going to allow us to place this record on the very top because remember, we want to be able, when we hit Save, we want it to push to the top. So this is gonna create an array of one item and then it is going to concatenate these other records.

So now I can say this.state.portfolioItems hit Save.

portfolio-manager.js

handleSuccessfulFormSubmission(portfolioItem) {
  this.setState({
    portfolioItems: [portfolioItem].concat(this.state.portfolioItems)
  });
}

And so now what we're going to do is we're taking our state of portfolioItems which we know is an array and we're adding it to the portfolioItem single array. And if that sounds a little complicated, it is, it is a little bit complicated for this process, and the reason for this is because I want to implement the behavior where whenever I add a record, it gets stacked on top of it and this is really the best way of doing it. If we just use push, nothing would happen because it would go to the very bottom of the array, it would create behavior we're not looking for.

We want to stack it on top so that's what we can do here. We are creating an array with one element, then from there, we're connecting it with another array which is our current list of portfolioItems. So with all of this in place, I believe this should work so let me just hit Refresh just to make sure we have all the latest data.

I'm gonna say testing update and now if I hit Save, look at that, that is working beautifully, we now have the ability to save a record, it updates the database and then it will go and it will update everything that we have right here in the sidebar list. It also updated the homepage and anywhere else that you're calling these lists of portfolioItems.

Now there's one other item I'd like to discuss 'cause if I hit Command + R right here and refresh the entire component, you see that it disappears. And that is simply because, by default, the API is not going to return in the specified order that we're talking about.

If you come all the way down, you'll be able to see our testing update here is at the bottom and if that's the behavior you want, that's perfectly fine but if you for some reason would prefer that everything, so all of your latest records were at the very top, I will show you a little trick. And this trick is something specific to the API I created but the reason why I wanna show it to you is because most APIs have the ability to add optional data and optional parameters and so this is good practice for seeing how to do that.

So I'm gonna open up Visual Studio Code, come down to the URL and after portfolio_items, what I can do and this is still within the string, what I can do here is I can add a question mark and anytime you see a URL, especially one with an API, so say you're calling the Google Maps API, you're gonna be seeing a structure identical to this.

You'll have your base URL, then you'll have a question mark and that's where you put the different parameters. So for example, for the Google Maps API, this is where you would put one of your unique identifier codes, you'd put your latitude and your longitude here, you may put a city name and a state name all listed right after here. So we have the ability to have a few custom parameters, so let's walk through what I've allowed us to have.

So question mark and then put type order_by= and I'm gonna say created_at and then an ampersand. So whenever you want to add multiple parameters, the structure is to separate them with ampersands and then from there, direction=desc which is short for descending.

"https://jordan.devcamp.space/portfolio/portfolio_items?order_by=created_at&direction=desc"

Now like I said, what I wrote right here is specific to our API. So these are items that have to be typed in exactly the way they are because on the API side, on the code that I wrote for that, I built in the ability to check for these kinds of parameters and then to render a different result set based off of it.

But this is good practice because most APIs you work with will have optional parameters like we have here. So now if I hit Save and come back to Google Chrome, you can see that the records that we created are now on the top and if we were to add another one, I'll just call it another one, hit Save, it is going here at the top.

The reason why it's going here at the top though is not because of what we just did in the URL, the reason is because we ran through this process again where we created that portfolioItem, we created the single entry array and then we stacked all the other ones after that and then the result was one single array that has what we created at the very top.

But now, if you hit Refresh, you'll see another one is still there and that is because we're requesting some optional parameters with the URL.

So great job if you went through that, you now have the ability to not only create records with an API but also automatically update your page and how it renders based on the feedback and the responses you get.

Resources

• Source Code