Create a Dropdown Menu using ReactJS

Today, In this tutorial we are are going to discuss how to create simple drop down menu in ReactJS and we have tried our best to make this tutorial as simple as possible. Here we are going to design CSS Dropdown menu with the help of ReactJS and also with the help of onClick Event, we are showing and hiding the drop down menu content.

React dropdown menu tutorial
Lets see the below source code, which help you to build more understanding:

https://www.skptricks.com/2018/05/create-dropdown-using-reactjs.html

The dropdown menu would have been better off as a presentational (stateless) component. I understand that you tried to make it simple, but the menu should have been passed props from a container component hence making it reusable as would be expected in the react world.

[quote author=kudaisi post=67708846]The dropdown menu would have been better off as a presentational (stateless) component. I understand that you tried to make it simple, but the menu should have been passed props from a container component hence making it reusable as would be expected in the react world.[/quot

Without state can you handile hide and display dropdown menu ??

[quote author=skptricks post=67710981][/quote]

Yes you can.

The container component will hold the states and supply the value of the states as props to the Dropdown menu (stateless). In the this case, the props would include a boolean that toggles visibility of the dropdown and an array of string to be rendered as menus in the drop down.

That way each time you change the states in the container component, all presentational components that where earlier supplied the states as props will be updated with new props. Another advantage is that other components can change the visibility and contents of the dropdown since it does not maintain a state for itself.. Get it ?

Your mistake is that you are using states to perform the functions of props, this is viewed as wrong (in some curcumstances) and not advisable in react. If necessary, I can refactor your code to reflect the pattern I'm trying to explain, if it will help you further comprehend my point.

Another thing I don't understand is why you committed a RAR archive to your github. You could have as well uploaded it to dropbox or 4shared. Generally, it is good to have samples of codes like this on codepen (or jsfiddle etc) [so users don't have to download to edit or try them out] and then repos can be maintained elsewhere (like git).