Building a custom dropdown menu component for React

Learn how to build a custom dropdown menu component for React.

Introduction --00:00
Create dropdown - 01:33
Add action to dropdown — 06:02
Add example data to dropdown — 08:45
Handling selections — 09:31
Import react-onclickoutside — 16:17

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

[caioca]

Great video! Solved my problem. Just a suggestion: it would be better if you showed the dropdowns you were gonna make in the tutorial prior to the tutorial itself so that people can see what they're going to learn, to see if that's what they're really looking for.

[Andaluz_TV]

This is, by far, one of the best videos on react components building in the entire youtube

[examplewastaken]

Can't help but think Christian Horner is teaching me how to make a custom dropdown menu in React xD

[FelipeOliveir]

And if i have links? How to interate over them in a way that each element in the list points to a different link.

[tiagoagm]

Nice tutorial. Little easy component, but quite well explained.

[jeisuxco]

I was looking for something to dismiss de modal once is open. Thank you so much for your help!

[sergiyrudenko]

Thank you, very interesting lesson! I use another transparent div with z-index bellow 0 and dataset properties and click handler to catch click event on this div to close dropdown on click outside.

[lawrenceardosa]

you can just use onBlur on the element to set its state to false and close it

[DanCooksFood]

How do you add animation to the dropdown?

[Skillthrive]

Great tutorial! This helped me build a new feature in my application.

[amybraswell]

Great video! Very succinct and works perfectly! -- Thank you!

[KSWETARUN]

When i am using this dropdown compoment twice in App.js, then it is not working properly, like using second dropdown i am not able to choose items. why this??

[javokhirbeknazarov]

Can you show how to make one whose menu appears on top of the elements under the dropdown (I mean using zIndex). I did nearly the same stuff but could not make zIndex work for some reason. I would be really glad if you could suggest something.

[huntersMoon]

nicely done!... also onChange Event i.e. value from dropdown change how to refresh the component or make API call ?

[quofintech]

Great video thanks! wouls it be possible to do it using the state in the parent component (app.js)?

[bogdanniculescu]

Nice one. What theme are you using on your VSCode?

[corrinlone]

can we use this code for our own projects ?

[majamarek]

Thanks a lot! It's really helpful tutorial.

Why not are not publishing the code? :(

[Tferdz]

At 15:13 you could have just said. Return