Refactoring ReactJS youtube player to show selected video

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.

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