Make a Dropdown Menu in React JS | Beginner Tutorial

In any self-respecting project, especially if it is an e-commerce or social, there is a need to have a drop-down menu that gives the user the option to go to other pages or to log off.
In this short but straightforward tutorial, you will learn how to create one and more importantly make it functional so that it opens and closes when the profile image is clicked.
We will use React JS, in particular, the useState hook and vanilla CSS.
#reactjs #dropdownmenu #project

[@dayadiaz327]

Thank You from Brazil!

[@vaibhavbhardwaj8895]

Such a helpfull tutorial You made it look soo simple :)

[@omarjab]

Thank you so much, i'm glad it helped :)

[@vaibhavbhardwaj8895]

I was struggling with material ui components recently so I decided to make my owne custom component, your video made it easy for me 😂(Just now applied it into my project)

[@rajatshrivastava879]

Feedback:
Lower volume in background music would make it more beneficial. Btw Thanks for the tut!

[@michaelsolomon6033]

Thank you bro

[@OXYggPubgm]

it is so easy thenks bro))

[@broken_jail2506]

how can i make it that when you click outside the component also closes, right now i have to click the modal to close it.

[@mohamedchine-ky6yk]

but bro in here when u click somewhere else it doesnt disppear

[@OXYggPubgm]

💣

[@segundoeliezerdelacruzfarr5498]

How could you add a useState that when clicking outside the button also closes

[@omarjab]

certainly there will be several ways, but the one I use is to add in div that acts as a container behind the actual dropdown and this container must have z-index less than the dropdown menu and it must expand throughout the page.
It will then have fixed or absolute position, width 100vw and height 100vh.
then, you'll need to add click event to this container and run a js function.
In this javascript function you would have to go and check if what you clicked (when the menu was open) was the menu or the rest, i.e. the container and you could do this by going and assigning an id to the menu so that on click you can compare it with the id of the container. if they don't match, it means you clicked the container and then only then do you change the state of the dropdown menu to close it.
i will probably make a tutorial on that pretty soon

[@waafaoueslati8679]

Thank you for this tutorial but I wanted to know where did prev come from ?

[@omarjab]

"prev" is a variable that represents the previous state value of openProfile, and it's used in the callback function to change the new state value based on that previous value.
example : openProfile is 25, if you did () => setOpenProfile((prev) => prev+2) inside the openProfile function, the useState of openProfile would change to 27, because it has stored the previous value, which is 25 and added 2.
think of prev as the value of the state before updating it

[@waafaoueslati8679]

@@omarjab okay thank you very much for this explanation it was very helpful.

[@qasimmehmood76]

king shit

[@praveenapriya6313]

Very useful but unable to see your source code.

[@swapnilvevo1680]

can we get source code please?

[@omarjab]

unfortunately i wrote that code on my old laptop and i've deleted all of my projects
but i might make a new tutorial similar to this one pretty soon