React part 14

4 min readJul 29, 2021

This will be a short description of reusing our custom hook!

(since the next topic is so important I don't want to muddy it up with this information.)

we first start off by starting our JSON server

npx json-server — watch data/data.json — port 8000

That will run our JSON file, we also need to run npm start, if everything works out the data will be there.

So, Thus this far in this component (BlogDetail), we have found a way to get data from the “parmas” of the URL, using the useParams() hook, and use them to bring up each blog. (you can find that in the last lesson)

Now we are going to use the UseFetch call again in the blog details component so we can have our data in a nice organized matter, instead of mudding up our code.

We had an H2 before with a simple string and the params id showing. Delete that in this component.

we need to add line 7 which is our useFetch custom hook, it basically fetching our JSON from that URL (localhost)and then we interpolate the id from those params on line 6.

Thus returning our data(which we switch from data to blog: also on line 7) we include our error handling, and isLoading from our use fetch hook as well.

I put most of the useFetch component above just in case you forgot what it looked like.

Basically, that fetch call above is taking in a URL as an argument which we pass in from anywhere when we call the function, then we have some hooks that store that data, is loading and error handling as soon as the data is returned back to us. Now we are able to pass it into anywhere, like BlogDetail component.

(That was a rundown of how that custom fetches work!)

Back at it, now in this component, we simply have all the data in a data object and then we present it in any way possible!

Line 11, it first runs “isLoading” and (&& ← what this means is “and” if you didn't know) if it “isLoading” is “true” then run anything after the && symbols which is the <div> with the string of Loading…

next is our error which will only show if you get an error but basically doing the same thing.

lastly is line 13 we are taking blog which is really an alias for data, and saying if there is blog data then run article tag wtih h2, a “p tag”, and another <div> tag with all the blog info.

Now check out your browser and it should all be working :

Hope you learned something new today, and if you have any questions just message me! Like I said before I want this to be short and simple because the next topic is big! Last, I left some javascript things and React lessons that came before this down below.

React…

React part 1 (How to start a react app)

React part 2 (components and dynamic values)

React part 3 (Multiple components and small styling)

React part 4 (click events with functions and react dev tools)

React part 5 (link to: useState hook and how to output lists in react)

React part 6 (Props and reusable components)

React part 7 (passing functions as props and use effect hook)

React part 8 (continue with useEffect hook, dependencies with useEffect, and setting up the JSON server to fetch)

React part 9 (Fetching data with JSON)

React part 10 (loading bar and fetch errors)

React part 11(custom hooks)