 Hello again, I'm Chantastic and today is day number six of React Holiday, our 25 day crash course into React. Now today, I want to show you how to fetch data in a React component. And it's actually super duper easy. Right here, I have a function that fetches a Pokemon from Poke API. It takes an ID and then calls an endpoint with that ID. If everything's okay, we get a thumbs up in our response. We're going to return the JSON. Otherwise, we're just going to promise dot reject. Now, this is an extremely basic fetch function. I'm sure you have something much more advanced in your application. But this will be good for our use cases. The question is, how do we actually call this function from React? Every time we get a new ID, React has given us a really handy dandy function for any types of effects that aren't naturally handled by React. So we can hook into them using a function called react dot use effect. aptly named, I would say. Now this function takes a function. So we'll do that. And inside here, we can just do whatever we want. So we can call this function, our fetch Pokemon function, give it the index, whoops, index that we have from use state and go from there. Now, right now, if I started clicking around on this, we wouldn't see any effects at all. And that's because we're not doing anything with a JSON. So let's chain a then onto this promise, take our JSON and console dot log it out format and save. Now as I hit next, and we get a new ID, if I jump into this console, we will see that we're fetching a new Pokemon for each click. Now, as I said, we're not going to use that today, but we will use it tomorrow.