Welcome to part-2 of the series. Let’s continue our journey, where i am changing my class based project to a functional project using hooks.

We will add the search functionality now. So, open the search_bar.js file. Below is the code of our current SearchBar component.

search_bar.js

So, let’s change it to a functional component first. After that at Line 4, we are using the useState hook to set the state variable of term to empty string. At line 7, we are using setTerm() which is equivalent to use setState() in class based components.

search_bar.js

Now, let’s add the SearchBar to our App.js file. Here, we are calling the fetchResource function with the search term which we are receiving back from the search_bar.js file.

App.js

So, now we have a fully functional SearchBar which changes the video to what we search.

Functional SearchBar

Next, we will add the VideoDetail component. For this we are using another state variable sldVideo. We are setting it to first object from the data array inside the fetchResource function. After that passing it to the VideoDetail component. So, it will show the first video, which gets returned from the first call with React Tutorials.

App.js

We will next add the Selected video functionality, so that the user can change the video by clicking from the list. We don’t need to change any logic in VideoList or VideoListItem component. We are just using the selected video to change the state of sldVideo, by calling setSldVideo(selected)

App.js

This completes our refactoring and now our App is hook based.

Hook Based

This completes part-2. You can find the code for the same in my github repo here.