How to get data from Material-UI Dropdown Select?
Learn to use Select dropdown component from Material-UI and get the selected value.
Hello friends, its Harit from bonsaiilabs. Today I will show you how to get the value from the
Select dropdown component provided by Material-UI.
I will open up codesandbox and create a sandbox from official React template. Then, I will add a dependency of
@material-ui/core to it.
Let me increase the font size so that you can see the code properly as I write. I will change the heading text to test if the output updates as I write the code.
I will now add the import for
MenuItem components from
@material-ui/core library. These 2 components will form the crux of what forms a dropdown select menu. Then, for the render, I will replace this
h2 tag with the
Select component. With in this
Select component, I will add a
MenuItem with a value of
10, and display as
Ten. I will copy this line a few times and ad few more numbers to it. With that, we can see a dropdown and 4 menu items inside it. Great! But as you see, this menu item looks odd, it should ideally have a label that tells us what this select dropdown is all about.
For that, I will import 2 more components from
InputLabel. We will use
FormControl component to wrap our
Select component. This is so that with-in the same
FormControl, we can add an
Numbers, that displays on the
Select dropdown. Alright, it show up, but see how the text overlaps with the dropdown icon? We must add styles to fix this issue.
I will import
@material-ui/core so that I can add styles. Next, I will create a constant called
useStyles and called
makeStyles. With-in this Higher-Order component, I will pass the
theme so that we can use it in styling if we want to. I will add a new style object called
formControl and assign a
minWidth property with a value of
100. To apply this style, I will call
useStyles() method inside our
App component and call it
classes. Then, on the
FormControl component, I will add a
className attribute and assign it value of
classes.formControl. With that, we can now see that the
Select component looks nicer with the label. Now as I select the values from the dropdown, how do I get the selected value?
I will add a new
p tag where I would like to display the selected value, but how do I get that? We need to keep the value of selected value in state so that we can use it later. First, I will add import for
useState from React. Next, I will add a new state variable called
value and a method called
setValue that I get from called
useState() method and provide empty string as the initial value. Then, I will add attribute called
Select component. This
onChange needs a function, so I will add a new method called
handleChange which receives an event
e, and calls
setValue() method passing the event's target value. The
e.target.value contains the value of the selected
MenuItem. I will pass
onChange. Also, to see what's selected, all we need is to display the
value variable's value. Now, as I select different menu items, we can the different selected numbers below. Fantastic! so next time you use a
Select dropdown component, you know how to get the value from it.
If you would like us to cover more topics or questions, leave the comment below and we would add them to our future videos. Keep creating good things, see you next time!