Update state asynchronously in React using Promise and setState()
In this lesson we will look at updating state in React based on the successful resolution of a promise making use of Promise.prototype.then. We will perform a user action such as clicking a button to delete an item and fire off a request to our API. Once our request is complete, we will update our component state based on current state using setState() with an updater function and remove the target item from the list with Array.prototype.filter.
Instructor: [00:00] I have an array of items in state here, and I'm rendering them out to this list. Each of them has an ID and a title. We're going to look at adding a button right here for each of them, that is going to allow us to delete an item. We'll just imagine that we have a method available to us onClick.
[00:19] We will call this.deleteItem and pass in the item.id. We'll just call this Delete item. Right now, if we click that, we have yet to define that. Let's go ahead and do that. I will go ahead and just add us an empty method here for now. DeleteItem accepts an id, and we're going to do something with that id.
[00:49] Before we can do that, we need...we're going to pretend that we have a request function here. We're just going to call it deleteItemRequest, which also accepts an id. This is going to return a Promise. This way we can pretend that we're interacting with an API of some kind.
[01:08] This has resolve and reject on it. We'll just add a setTimeout here just to give us a little bit of delay, we can get a feel for what's going on here. We'll just add 750 milliseconds. Right now, we'll just go ahead and resolve that. If we go ahead and pass that along here, we'll just invoke this deleteItemRequest.
[01:31] Let's chain onto this Promise. When this Promise resolves in this then method, what we're going to do is we're going to update our state. Let's setState, and we're updating state based on our existing state. We will use the function syntax for this which accepts state, and we're going to return the object which will be the new state.
[01:55] We're going to update the items property on state, based on the existing ones. We're just going to take this items and we're going to filter out, and we're going to take the item, and we're going to keep all of the items that are not this one that we're deleting. If the item.id is not equal to this, we'll go ahead and keep that. Now if we try this, after a little delay, we'll see that each of these are deleting.