Up next in 10
Build a React.js Multi Tag Select Dropdown Component in Browser Using react-select in JSX
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video I will introduce to a
0:05
new specific library inside react chairs
0:07
which is used to basically make these
0:10
select dropdowns inside react CH so if
0:13
you have different choices inside your
0:15
application if you want to make a select
0:18
drop-down using different options you
0:20
can use this Library it's very easy to
0:23
make
0:24
it I will show you step by step so we
0:27
have different options right here in the
0:29
select dropdown so it's a drop- down
0:30
input
0:33
field so actually the name of the
0:36
library is react select this is actually
0:39
the package so if you go to npmjs.com
0:42
just search for this
0:46
package the very first result which
0:49
comes this is the actual
0:52
module so it is almost got almost 5
0:55
million weekly downloads this is
0:57
actually the command I've already
0:59
installed it so I will show you the
1:01
complete example step by step so just
1:04
make a simple functional
1:06
component and at the very top we need to
1:09
import this module so you will simply
1:10
import the select method which will be
1:13
coming from react
1:17
select this is actually the module and
1:20
it has a dis select method so right here
1:23
we need to declare some choices here so
1:25
you can simply declare in options object
1:29
object right here so right in this
1:32
object we will have two properties first
1:35
is a value so
1:39
here value will be this and then the
1:43
label will
1:45
be let's suppose
1:54
this so we have three
1:57
options so instead this will be an array
2:00
so just make this as
2:03
array so array of
2:05
options so we have three choices we can
2:08
put a
2:10
comma so you can have as many choices as
2:13
you want so in I'm just showing you a
2:17
very simple
2:28
example so we have three different
2:31
choices right
2:33
here so now our job is to create this
2:37
select field so now in this jsx part we
2:40
will
2:42
simply use this component that we
2:45
imported which is Select
2:48
directly and it actually takes three
2:51
options first of all the value here
2:53
whatever value that you want you'll
2:55
directly provide this value which is
2:58
your selected option so we just need to
3:01
declare a state variable so just to keep
3:04
track of which option the user select so
3:08
selected option set selected option and
3:12
for this we will be using the UST State
3:17
hook so initial value will be
3:20
null so now in this variable we just
3:24
need to provide our selected
3:27
option and we'll also be binding an on
3:30
change event handler so whenever you
3:32
change the value you will execute this
3:34
function handle change so we just need
3:37
to now Define this function it's a
3:39
custom function so whenever you change
3:43
your input whatever your option in the
3:47
drop down this event will fire and
3:50
inside this event you will simply set
3:54
whatever is the selected option so
3:56
directly the option will get passed
3:58
right here we don't need to to write the
4:01
selector for this we can directly set
4:04
the option and then we can also console
4:06
log that this option
4:09
selected we can get the option by
4:12
console logging it and here the third
4:15
option we do need to provide the options
4:17
so it's it's actually this options array
4:21
which contains actual data so we just
4:23
need to bind the data so once you do
4:26
this refresh the browser you will see
4:28
your select field is ready now we have
4:31
these three choices depending upon Which
4:34
choice you select you will see this
4:36
console log message printed
4:39
out options selected and this is
4:42
actually your
4:49
label instead we can
4:54
actually you
4:56
selected and Then followed by the option
5:04
so we see you selected and here we do
5:06
need to give option dot whatever is the
5:21
label so in this way you can
5:26
actually make this simple select field
5:29
using the this Library react
5:31
select and uh it's very easy to
5:34
implement your select box inside your
5:37
application using this Library so that
5:40
was the tutorial guys thank you very
5:41
much for watching this and do check out
5:43
my website as well free media tools.com
5:46
which contains thousands of free tools
5:48
regarding audio video and image and I
5:51
will be seeing you in the next video