How to disable a button in React without too much bother
Ahh, React. Such a pleasure to dive into from the intricacies of vanilla javascript. I love the structure of the library, the convention, the way that every facet of your code is neatly divided into separate components that make debugging so much easier and make a large application seem a lot smaller.
For my application “Watchlist”, I pulled from two endpoints off of the TMDB API. One, was the top 20 streaming movies of the day, the other was a search feature that scoured the deep database of 750,000 movie titles. From here, a user can either select these movies and bring them into their personalized watchlist, or if they’re in their watchlist either delete the item or add to a “watched” list.
One of the issues I came across while writing the front end for this application was trying to eliminate duplicates when adding a movie to either your “watchlist” or “watched” list. I really wanted to avoid using any convoluted backend logic when trying to enlist this feature. That’s when I came across the “disable” feature in JS and React. When used correctly, you can literally disable your button (which greys out the button) preventing the user from being able to select that button again. In this example, I was trying to prevent the user from being able to select the same movie over and over again.
My logic was fairly simple. If a user has already selected that movie to be in their watchlist, then they can’t select it again. In order to accomplish this I had to iterate over their watchlist, which I had access to by connecting to the store in redux. I found the particular movie by the respective id(data, the example below is the prop movie object, and tmdb_id is the unique id). I then saved that “movie” into a variable called storedMovie.
From here, I used a ternary statement to verify by a boolean value whether or not it was true that that movie exists within the current users watchlist. I saved that value into a variable called watchlistDisabled.
Now I had a boolean value on whether or not the current user has a particular movie in their watchlist. From here all I had to do, was disable the “Add to watchlist” button if watchlistDisabled was true.
Voila! I now managed to eliminate any duplicated movies in a watchlist without writing any complex code on the backend. This new feature also had the added benefit of a greyed out button if a button was disabled, that made for a much better user experience.
You can check out the entire Watchlist application here:
Thanks!
