React Dropdown Select Tutorial | React Select

hey everyone in this video we will use react up down list package which is a very useful package for using drop down in react cheese and it has very good documentation and also you can customize it it has too many options to customize it okay so now we will create an example first of all first of all we will install this okay by using npm Point add drop down select after installing that so let's come to the our app I have already installed this see it react drop down list we have this package so now let's use it okay to use it first of all we will import it select from react drop down list after that we will use that first options to this now your name name is equal to for example select with us in options options is the data that we would like to pass this so for the options I will create here the data options is equal to the first one would be labeled for example because in the video is one meters three so yellow so now let's pass that here so let's check it server is running okay so let's see we have these values so now to customize it if you don't write for example you have written here ID and name of it I have ID and this is name idn name something what you should do then you should write label field is equal to with a ID value of field is equal to okay so this should be menu field now see it it is okay now so if you would like to select more than one video what we should try just write quality okay after writing this you can select more than one see and remove this these are the villagers so you can change this and another property would be so to get the selected value so for that we will create our email name const menu is equal to use datehook and yeah just right here and change event set value 6 video and we will pass value to that so let's print that under this here we will just try it there you go so let's check uh sorry so it is returning an array with us so first of all I should change it it is returning an object with us okay ID and name both so here what should we write we will add something value dot map foreign foreign so we can change the color of it read so see the color has changed to the read see and also we can drop down position where you would like for example top okay so let's navigate to the top see it is equal to the top and another property it is cerebral is equal to True let's check it and I'll just bring it back to the bottom and see it again so the searchable work by we should search that by video cannot buy property we should just write one okay two three it is not searching by label it is searching by value so it was all about a few properties of react drop down select so you can search further documentation of this you can see more options just to customize it so if you have liked the video please subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 10,838

Keywords: react dropdown select, react-dropdown-select, react dropdown, react select dropdown, react, react dropdown menu, react dropdown list, react select dropdown example, multi select dropdown in react, dropdown, react js, dropdown in react, react js dropdown, react select, react-select dropdown, react dropdown menu tutorial, reactjs select dropdown, react multiselect dropdown, dropdown react, react-select dropdown tutorial, dropdown menu react, react-dropdown-select example

Id: GsH_X5SiU6Q

Length: 7min 36sec (456 seconds)

Published: Tue Feb 07 2023