Basic Select Or Dropdown options

hi today we are going to learn about this select select another name is drop down we are going to implement this basic select in this react.js so first of all we'll take this select tag in this we are going to take this value is equals to we should declare the value here const in the array brackets option set option which is equals to U State it's a hook so State Management variable initial will keep it as empty after that we'll use this option here while you're selecting now automatically this option is going to select in this after that we need to handle the options on change function we are going to use in this for this function we need to write it as handle change or handle options copy this function and implement this I mean write the definition here const handle options equals to we should take that Arrow function to handle these options already set option is available now in this wheel pass the parameter which is even value this will pass this e Dot Target Dot value then coming to this selector we should use the options here basic options we will follow in this for that uh child tax or option close a and use whatever you want like let me take Monday day so I'm going to take the in this like that five six seven Monday Tuesday Wednesday Thursday Friday Saturday and Sunday right then it is already running straight let's check this one more thing is that we need to display this option whatever we are selecting the option need to check in this that is we'll take this h3r h2 tag in that before this we can mention that label within this you can type select a something that's it then we look into this screen uh see whatever we are going to select that now it is selecting and one more thing is that we can use the BR tag here for to show in the new line right now we once again we'll refresh it initially it is selecting Monday and whatever you are selecting this it is showing that option uh we can use that default select like initially we can use that select like this see here initially it is going to display that select here we are selecting this some other days it is showing and at the same time if you select this now again it is showing it is uh it should not take this like this so in this basic functionality we can keep it as empty that is good selection whenever you want to select this default one we can use this basic selecting model okay if you want to take that select here we are going to use that another model Dot here whatever you are selecting now uh if you select this refresh it and if you select Monday if you select select it is showing select to avoid these we are going to implement another basic model So to avoid these uh if you select the select it is showing now in the output now it should not select it should not appear there for basic selector we can remove this from here so that it is okay functional device it is okay and logical is also it is okay if you want to mention this select dot dot dot default empty we can use by removing this if you want use this one this kind of implementation is will not work so for that we should use another logic for default if you want to look into this select at the same time if you select the select it should not appear in the selection way so here we can use another attribute here value equals to here we can use here also value we can use but it should be empty remaining you can give the option values like one two three four five six seven or else we can use the Monday instead of one year we can use Monday instead of two you can use Tuesday that means like Ctrl C and remove this to and use this like this also we can use that is your based on your requirement no I am using this here if you select any day it is going to select the values 1 2 3 and so on seven if you select select option it will not impact in in our selection criteria it is going to show only empty so let's check this in the output refresh it so by default select is there if you select Monday it is showing give it is giving a value is option value is one option value is 3 if you select select no it is not giving any option value it is the correct way to implement by using this value right so just look into this basic implementation of Select just go through this that's it friends thank you

Channel: BATHULA REACTJS

Views: 16

Keywords:

Id: GPGzCtQ-TDE

Length: 10min 26sec (626 seconds)

Published: Sat Jun 03 2023