Welcome to part-2 of the series. Now we will add the SearchBar functionality. It is pretty much straight forward. First update the App.js to include SearchBar as below.

App.js

Now, update the search_bar.js . Here, we are first import the connect and the YTSearchAction. After that from the onInputChange(), we are passing the text box updated value to the mapDispatchToProps, similar to App.js

search_bar.js

Now, our Search bar is fully functional and we can search anything on youtube.

SearchBar

Now, we will show the youtube player by working on video_detail.js . First let add the component to App.js

App.js

Now, we will update the video_detail.js. You will see the pattern is almost similar to video_list_item.js , where also we use mapStateToProps to get the ytSearchState value and then use the react lifecycle methods componentWillReceiveProps to get the changed ytSearchState.

video_detail.js

Next, we will get the first video and display it with the usual html used previously.

We are also checking if we receive an empty array, because the YouTube API call takes time and react will throw error, if we don’t check the condition.

video_detail.js

Now, we will get the Video player to display on our page and show the first video of the search.

Video Player

This completes part-2 of the series.