 Hello! Welcome to day seven of React Holiday 2018. I applaud your stamina. I can't believe we've made it this far. It's been seven days. We got another two plus weeks to go. I'm having a lot of fun. I hope you are too. If you were following along yesterday and you were using a browser other than Safari, which I was using randomly for whatever reason, you might have been seeing this type error. Now, I apologize for creating this app in such a way that it didn't work across the browsers. It seems to me like this is an error that is getting surfaced by code sandbox saying the fetch failed. This is one of the kind of disadvantages of using an environment like this. I don't know how those errors get surfaced differently in different browsers or what. Anyway, if you close this, you should see the same thing that we had before. Again, I'm very sorry that you had a different experience yesterday. However, we're going to get out of that state. We're going to start requesting real data again. So hopefully we won't have that problem. Again, very sorry. What I want to do today is I want to introduce our first hook. Hooks are amazing. I'm sure at this point you've heard a lot of the hype about them. I want to start with the use state hook. It's the easiest one, I think in my opinion. Some of the other ones get a little bit complicated. We're going to start with use state to get our hands wet with hooks. We're going to use it to track the currently selected Pokemon. Eventually, this is going to be a list and you can select and see the profile for a Pokemon. In order to do that, we need to keep the selection that we've made so that we can show the right Pokemon. What you need to know about hooks, so we've again forked this from day six. We're on day seven now. You need to make sure that you are on 16.7.0-alpha some number. Now, this project is set up with it, but if you're setting up a project on your own, if you're using create react app or you have your own type of setup, like you need to be on this version or nothing that I'm going to show you with hooks is going to work. That'll be very frustrating for you. So, let's dive in. So, the first thing is we need to figure out a place to hold our state. I think that the app level makes sense for that. So, we have this whole error boundary suspense Pokemon list. So, I think that it would make sense to just have that state live in this app level. What we'll do is we'll put a big bold text here that says selected Pokemon ID. Right now, we'll just say one. I'm not totally sure why I keep having to reload this sandbox, but we'll find out. Again, this is going to be day seven. So, that's cool. The next step is that we want to make this dynamic, and we're going to use use state for that. So, let's open up the react.js docs, and search for use state. All of the hooks have this use prefix by whatever. It's the standard. A hook should have the word, lowercase word use in front of it. CamelCase. So, what does the use state look like? So, you call use state as a function, and you give it an initial value. In our case, we're starting our journey through Pokemon at one. So, we'll give it just a fixed number one. Now, when use state is called with this initial value, it returns an array. So, if we just took that array and we called that Pokemon, or Pokemon selection, or Pokemon ID, or whatever, we would have an array with two values in it. At the first position, it would be the current state of that thing. At first render, it will be the initial state. And then an updater function called, sorry, I got a little tongue tied. But we'd have an updater function. Now, that updater function is going to, you can call it with a new ID in our case, and update the ID. And then this number, this value updates. Now, it doesn't have to be a number if you wanted to put a string text in here, or you wanted to put an object, or an array, or whatever in there. That's all fine. It's going to come in at this first position. Now, if you just took this as a value, and didn't do this destructuring assignment to it, you would have to access those via position. So, you would say Pokemon of zero would be the current count, or the current ID, and then Pokemon of one would be the updater function. And that's kind of a weird way to use this API. However, it is really handy when you combine it with destructuring assignment, because you can say, I know this is an array. And for the first value, I want to refer to that as, in this case, state. And I want to take the second value, which is the update function, and refer to that as set state. In our case, this would be Pokemon ID, and, or, yeah, Pokemon, selected Pokemon ID, and set selected Pokemon ID. So, that's how that works. Let's dive in and write that. So, I know it's all a little bit confusing. It's actually not a syntax that I've seen other languages use for this type of thing. So, it might feel a little bit weird at first, but I think you'll get the hang of it. So, first of all, we are going to call react.use state. And we're going to give it that initial value that we were using here of one. Now, how do we use it? We need to assign it somewhere. So, we're going to say let, and we're going to use, again, our array destructuring assignment, because we know that this function returns an array. The first value is going to be our see, selected ID. Let's be verbose. So, selected Pokemon ID, which means that we can now change this to selected Pokemon ID. It should still be one. Now, if we change this to 10, that should also update. I think my computer is just churning because I'm recording a video, so it's just a little behind. Yeah, so, 10. Great. So, let's change that back to one. Now, for the magic, the second argument in this is going to be that update function. So, the update function, we will call set selected Pokemon ID. Easy as that. Now, let's use it. We have a Pokemon list, right? And that list controls the whole list, so we'd like to give it a function. I'm going to call it on select. And we will call this any time any of these items gets clicked. So, what I'd like to happen is I'd like to give it a function, which takes an ID and then calls this function that we've decided to find here to update the state with it. So, we have, when something is clicked, we're going to call a function with an ID and call this function here with that ID, which is going to do all the hooks business, which we don't have a whole lot of time to discuss today, but do all the hooks business and update this value here. So, this is looking good, this is the API I want, but it's not implemented yet. So, let's jump to Pokemon list. Where is that? Pokemon list. So, right now we're not taking any props, so let's fix that. We know that props is an object, and the one that I'm interested in is this function called on select. We're then going to say every time one of these is clicked. So, on click, we want to call a function that calls on select, and we are going to use the Pokemon, let's see. We have to call it with a Pokemon ID. So, unfortunately, so this is a little bit of a problem. This is where we get into problems. This API does not have an ID. I'm going to prove that to you. So, we go into this list and, well, crap, we have name and we have a URL. Why there's no ID? I'm not totally sure, but it's a free API, so I'm not going to complain. However, we do see that there is an ID, it's just not a property on these objects. So, we can get that. So, it takes a little bit of hackiness, but we're going to do it and we'll clean it up later. So, I count one, two, three, four, five, six slashes until the ID. So, we are going to just kind of do some JavaScript nastiness to get a workable ID. So, since we don't have an ID, we're going to use the URL. We're going to call split on slashes and use the sixth value in that array. I know. I know. I know. We'll make it better. I promise. But for right now, I just want to get it working and then we'll fix it. So, let's save that. And now, when I click these, hold on, reload. Now, when I click these, nothing happens. Now, when I click these, it will update the ID. So, just a recap. We have, we're now using use state. We're starting with an initial value of one, which we use destructuring assignment to name selected Pokemon ID. That is the value. And set selected Pokemon ID. That's the function. We have rendered that out in our component right here. Selected Pokemon ID is four right now. Because I clicked around. It would start at one, obviously. Now, we created a new API on our Pokemon list so that, like, on select when an item is selected, we give it a function to call, which takes an ID and calls this function with that ID to update it. We then went into our component and said, hey, when these list items are clicked, call this on select function. Or we give it a function that calls on select. And then we did some kind of nastiness to get a usable ID. I know that's a lot of steps. And I hope that we can kind of clean up a few of these. The next thing I want to do is add some selection here. So, you get a little affordance to see which item on a list is selected, not just by the number. And we will tackle that next. Now, about next. I have had a ton of questions come up over these last seven days. So, in order to give your inbox a rest, I was thinking that I would take a little bit of a break just for two days just over the weekend. And I would just do kind of a question and answer thing in a video format. The emails would pick up again on Monday and actually diving back into where we're leaving the app right now. So, if you have questions, please, you know, comment on this video or if you're on an email list, email me back with your questions. And I'll take those two days to just go through anything that might be a little confusing in this video format, which is a little bit easier than text. So, have a great weekend. This is a great chance for you to get caught up if you haven't already. I appreciate you. I am super excited that you are learning hooks. I'm super excited for the next couple of weeks. We're really going to start to dive into some real live code. And yeah, have a great weekend. I'll see you if you have questions on tomorrow. And if you don't, see you Monday.