2023-04-04
2312
#react
Doğacan Bilgili
240
Apr 4, 2023 ⋅ 8 min read

Customize a reusable React dropdown menu component

Doğacan Bilgili A software developer who is also into 3D-modeling and animation.

Recent posts:

Enhancing Two-Way Data Binding In Angular

Enhancing two-way data binding in Angular

Angular’s two-way data binding has evolved with signals, offering improved performance, simpler syntax, and better type inference.

Alexander Godwin
Nov 14, 2024 ⋅ 6 min read
Hand holding purple sticky notes for CSS sticky positioning guide.

Troubleshooting CSS sticky positioning

Fix sticky positioning issues in CSS, from missing offsets to overflow conflicts in flex, grid, and container height constraints.

Ibadehin Mojeed
Nov 13, 2024 ⋅ 5 min read
Task Scheduling and cron Jobs in Node Using node-cron

Scheduling tasks in Node.js using node-cron

From basic syntax and advanced techniques to practical applications and error handling, here’s how to use node-cron.

Godwin Ekuma
Nov 12, 2024 ⋅ 7 min read
Working With The Angular Tree: Flat Vs Nested Trees And More

Working with the Angular tree

The Angular tree view can be hard to get right, but once you understand it, it can be quite a powerful visual representation.

Lewis Cianci
Nov 12, 2024 ⋅ 21 min read
View all posts

11 Replies to "Customize a reusable React dropdown menu component"

  1. The code snippets are not accurate. I tried following along but your syntax errors were too confusing to try to fix. Look at the portion where you introduce FontAwesome for random angle brackets and closing divs with no opens.

    1. Hi, Alex. Should be all set now. This isn’t Doğacan’s mistake. The formatting got borked when we migrated the blog to wordpress. Thanks for pointing it out (and sorry for the hassle).

  2. This tutorial is not bad (you can actually use functions with hooks and avoid using classes), but without the styles for the components I can’t really see the example that you produce here. So I would add a codepen or something with the whole component.

  3. Hey Dani,
    That’s true that now you can do that with hooks, but that was not an option back then when this tutorial was written.
    As for the styling, you can actually find the complete source code in the GitHub repo which I linked at the very beginning of this article.

  4. Im not sure how useful this tutorial is as I did not try it 🙂 But just by looking the code, I saw that it is not working as it should. A custom select should be accessible through a keyboard, like html select is, for accessibility reasons and for you to be able to select an option from your keyboard.
    So this tutorial has these things wrong:
    – No `role=”option”` and `role=”listbox”` attributes were set
    – There are no handlers for simulating a default’s “select” behavior, like navigating with the arrows.
    – It’s inaccessible

  5. I was about to start reading the tutorial, when I come across your review I changed my mind. thank you Mr. You are a time saver 😉

  6. I got an error “toggleItem is not defined” when I passed the toggle item to the list item.
    Please I need and urgent help.

  7. Hey man just wanna say thank you and keep up the good work!
    Found myself creating a custom select and was missing the setTimeout bit for “handling outside clicks”, funny you stuck that at the end of the post lol

Leave a Reply