Welcome, Guest: Join Nairaland / LOGIN! / Trending / Recent / New
Stats: 2,863,253 members, 6,869,752 topics. Date: Thursday, 19 May 2022 at 02:53 AM

Create A Dropdown Menu Using Reactjs - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Create A Dropdown Menu Using Reactjs (942 Views)

How To Create Dropdown Menu With Html And Css / React Native Picker Spinner Dropdown Menu List Example - Android / Create Dropdown Menu In React Native (2) (3) (4)

(1) (Reply) (Go Down)

Create A Dropdown Menu Using Reactjs by skptricks: 5:21pm On May 19, 2018
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

Re: Create A Dropdown Menu Using Reactjs by kudaisi(m): 11:42pm On May 19, 2018
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.

1 Like

Re: Create A Dropdown Menu Using Reactjs by skptricks: 5:23am On May 20, 2018
[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 ??
Re: Create A Dropdown Menu Using Reactjs by kudaisi(m): 3:22pm On May 20, 2018
[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).

(1) (Reply)

What Are The Tips You Can Give To A Beginner Programmer / Embed Youtube Video In React Native Android Using Webview Component / Windows 10 Original Files October 2018 Update Version 1809

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2022 Oluwaseun Osewa. All rights reserved. See How To Advertise. 38
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.