Refactoring ReactJS youtube player to show selected video

Image for post
Image for post
Photo by KOBU Agency on Unsplash

Many times in UI development we get request from client/user to highlighted item from a list once clicked upon. It can be a navbar, a list of videos or anything else.
Now we don’t just have to highlight an item, but also to unhighlight it if some other item is clicked.
Don’t confuse it with hover state, which can be easily done by CSS. But to do this is react is a task as we have to play with state, props, callbacks.

Let’s refactor the youtube player which we created in the the Youtube player with react series.
We will now clone the repo and do a npm install.

Image for post
Image for post
Clone the repo

You can find the repo here.

You can read rest of the blog from my blog site. The link is below.

https://thewebdev.tech/refactoring-youtube-player-to-show-selected-video

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store