Full React Tutorial #26 - Reusing Custom Hooks

In this tutorial we'll re-use the custom useFetch hook that we made earlier, to fetch the details of a single blog.

🐱‍💻 🐱‍💻 Course Files:

🐱‍👤🐱‍👤 JOIN THE GANG -

🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Helpful Links:

🐱‍💻 🐱‍💻 Social Links:

[hiteshrohira]

I promise when I get a job...the first youtuber I am supporting is Net Ninja❤️❤️❤️

[oliverblue]

I'm learning react from many sources and so far this series is the most concise and to the point! Thank you!

[dakshamdev]

Thanks a lot, Net Ninja, you are the most organized YouTuber.
This series is very helpful

[maskman]

now we know how custom hook/reusable hook can prevent us from reinventing the wheels, feels good to be able to fetch individual article with same logic, thank you Shuan for ths tutorial !!!

[RakeshKumar-zjhu]

I’m starting to get very excited, , you have almost reached till where I was comfortable with.... hopefully you’ll get into state management with either redux or context!!! ❤️❤️❤️

[maxwelldemaio]

I have officially caught up and liked every video along the way! Thank you for this series 😁

[alvarolloret]

For those that are having an error in the BlogDetails page, for him it loads without needing to check if blog is null in that part, but maybe your blog data is not loading fast enough so it's null at the start and can't access their properties, you can write that part like this to avoid null problems:

<h2> {blog && blog.title } </h2>
<p> Written by { blog && blog.author } </p>
<div> {blog && blog.body} </div>

[nikhildhakal]

With latest react-router-dom, I didn't have to make AbortController functionality. Works find without it, no error shown.

[AjitKumar-mmzq]

Black-belted teacher, after this series can you publish a refreshment-series on React Native for android

[adrianapascale]

Really useful content, thank you so much for these tutorials!!

[Liverpoolfanatik]

btw you can see an error in console (with exclamation mark) "no routes matched location"
If you are using RRD v6, "return" in App.js should looks like this

return (
<Router>
<div className="App">
<Navbar />
<div className="content">
<Routes>
<Route exact path="/" element={<Home/>} />.
<Route exact path="/create" element={<Create/>} />.
<Route exact path="/blogs/:id" element={<BlogDetails/>} />.
</Routes>
</div>
</div>
</Router>
);
}

correct me if I'm wrong :)

[yashinnews]

I am tired of watching udemy videos but your videos are very interesting Thank you!

[JollyBeJolly]

/* blog details page */


.blog-details h2 {
font-size: 20px;
color: #f1356d;
margin-bottom: 10px;
}


.blog-details div {
margin: 20px 0;
}

[nicktran]

If you make dump mistake like I did and took me 2 days to figure it out. I had to go back all the way to realize that you are supposed to keep 2 terminal running. One for React, and one for Json server. npm run start and npx something. Good luck

[roysheppard-dev]

Will you be covering useContext and useReducer in this course? I know you have a course on them but not sure if there have been updated methods since that launched.

[kushagramandal]

Hello there, just wanted to know when this playlist will be completed?
Awesome work BTW!

[fcandann]

Hi, we didn't map data like bloglist.js component. But it still works on blogdetails.js. Why?

[onup]

everything up until this point has ran smoothly lol unfortunately I keep getting the 'could not fetch the data for that resource' whenever I try to click on any blog post and I'm not sure how to fix this to move forward! Thanks!

[davudhmdov]

Hey . after use useParam I get Cannot read properties of null (reading 'useContext') this error . can anyone hel me?

[stephentonycodes]

Excellent tutorial net ninja. But i'm having an error anytime i click on one of the blog list, it goes to the path we set it to but doesn't render the blog details to the DOM. I've been trying to debug the issue but i'm stuck