Full React Tutorial #26 - Reusing Custom Hooks

Key Takeaways

all right then so now we can click on one of these links to go through to the blog details page where we have access to that route parameter the id for that blog so we can use that inside this component now to make a fetch request for the details of that particular blog from this db file and to do that we're going to be reusing our custom hook use fetch now remember this returns three values the data we're trying to fetch in our case the individual blog and is pending property which is true or false and also an error if there is one and all we have to do is use this hook in the blog details component now and pass in the url or the end point that we want to use to fetch data from so that's what we're going to do inside blog details so let's first of all down here say const and we want to grab a few things from this use fetch hook we want the data first of all then we want the error if there is one and then the is pending state as well and we're going to set that equal to use fetch and we need to import that as well at the top so let me say import use fetch from dot forward slash use fetch okay so we just need to pass in the end point right here so i'm going to paste this in so it's local host port 8000 forward slash blogs forward slash and then we need the id of the blog we're trying to get now we have access to that because we use this use params hook to grab it right here so i can just tack it on the end by adding a plus and then id all right so now we're using this hook to get these three properties now inside this component i want to call this data property right here block so let me do that by saying colon and then blog so now down here we can use this blog property all right so at some point we're going to have this data we might have an error and we might have true or false for its pending so i want to conditionally output a bit of template dependent on these values so let's get rid of the h2 and start this first of all i want to output a loading message if this is true so again curly braces and we'll say is pending and then double ampersand let's spell this correctly first double ampersand logical and so the thing on the right only outputs if the thing on the left is true and this is going to be a div and inside that div oops let me just create this tag we're going to do a loading message so we'll just say loading dot dot dot all right and after that i want to output the error if there is one so error double ampersand and then another div and inside this we want the error if there is one close off that div and then finally we want a bit of template for the blog itself once we have blog details once we have a value for the blog now to begin with that starts as null right here the data so we don't want to output it if it's null only when we have a value so we'll say blog double ampersand and then we'll return some kind of template in the parentheses now that template is going to be an article first of all inside the article i'll do an h2 for the blog title so blog.title and then oops again spell this correctly and then below the h2 we'll do a paragraph to say written by and then blog dot author and then finally we want the body property inside a div so let's do that div and then we'll say blog dot body now if we take a look at the data that's this property right here the actual contents of the blog so i think that is all correct let me save this now and preview and we see first it loads then we get all the details right here let's try going from the home page to one of these click on this yep works and let's click on the other one my first blog yep works and also if you just typed in the url directly it would still work okay cool so then i just want to add a bit of css to this to make it look a little bit better so i'm just gonna paste these into the index file over here like so so just three styles first of all the h2 to increase the font size give it a color and a margin bottom then the div which is if we take a look over here this thing the actual body of the contents we give that a margin top and bottom and then finally we have a button but we don't have a button inside here yet so let's get rid of that we only need the first two styles that's coming later when we start to delete the blogs and we have a button for that delete so let's save that and our refresh very subtle not much at all but it just spaces things out a little bit all right so hopefully now you can see how reusable this use fetch hook is because we're just passing in the end point whenever we want to get some data and we're getting these three properties back every time an error if there is one and is pending state and the data itself so we can reuse this over and over again whatever the end point is in different components so really really useful next up we're going to turn our attention to this create page and look at forms