 So we have our Pokemon all set up. It fetches a Pokemon, displays the name and the abilities. These are the things that I care about right now. But it also like a way of paging through these Pokemon. I'd like to start with one and go back and forth. So let's get our hands dirty and make another component. We'll need to keep the ID somewhere. So I'm assuming we'll use state for that. So we'll use a class to define this component. And as always, it will extend the base react components. And like all the others, render. To keep things simple, we'll just render div. And inside that, our Pokemon. I'm getting an error because I spelt Pokemon wrong as I am one to do. And again, another error. We need to return. Good. Everything's looking great. Now that we got all of those solved. Next thing we need to do is to provide the ID to our Pokemon component. I'll use two just so we know that it's working. We should see Ivasaur instead of Bulbasaur. So let's go to the code in Pokemon, where that's being set. It's right here. We're fetching one statically. Component did mount like render also has access to this stat props. So we can use our newly minted ID prop to dynamically fetch this Pokemon name. So this is now working. And I said we were going to use state to store this. So let's change this to this.state.id and use our constructor to set that initial ID. Anytime we use a constructor, we call super set this.state with an initial state of ID one. Now let's add a button and everything we know about calling set state to progress through this to add a next button. Use a button element type button on click. We'll give it an anonymous function and inside it, we'll call this dot set state. Now we want this to be dynamic and anytime we want something to be dynamic inside set state, we can't use the object form. We need to use the function form. And in this form, we get the previous state and use that to inform our returned next state. Here, we want to set ID using previous states ID plus one. And then close that up maybe next that seems to go well for this button and give it a test. Now we're pressing this button but nothing seems to be happening. So it makes me wonder is the problem here in setting the ID or is it a problem in rendering the Pokemon? So just for giggles, let's spit out that ID and see what we're getting. So we'll go here, we hit next. All right, so the ID is changing but we're not getting a new Pokemon. The problem is that our Pokemon component is not set up for updates. We're using the wrong lifecycle event at least the wrong one for updates. So let's find a component lifecycle method that does what we want. We'll go to the react.js docs down to references, react component and what we're doing is we're looking for update life cycle method. So we have mounting and updating. This is what we're interested in. Now we have component will receive props should component update, component will update render and component did update. Let's start at the top of the list. Component will receive props. So component will receive props is good if you need to update state in response to prop changes which is exactly what we need to do. It also doesn't get called on mounting. So we can still use our component did mount to fetch the initial Pokemon. And finally calling set state generally doesn't trigger component will receive props again which means that when we do our fetch and then that fetch calls set state with a new Pokemon it won't enter an infinite loop. I think that this is exactly the lifecycle method that we need. It's back to our code. Let's paste in what we found. We're gonna call fetch Pokemon again in this lifecycle. Now instead of this dot props we're gonna use the next props that we take as an argument here. We'll use the ID that we get when this function is called which is the next ID. We do the same as we did in our component did mount function take the Pokemon data and call set state with it. Now let's try again and see how this tracks. Going to Ivosaur works. Going to Venusaur works. Charmander, Tramillion and Charizard. It looks to me like we got everything working that we wanted. So let's go and add our previous button so we can get back now. We'll just copy and paste the button that we already have and here instead of plus one we'll do a minus one and we'll change that text to previous. Now we can go forward and we can go back. Congratulations. You made a perfect Pokemon pager.