React part 14
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 :
The Social Media…