How to get data from Material-UI Dropdown Select?

Learn to use Select dropdown component from Material-UI and get the selected value.

Full Transcript

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 Select and 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 @material-ui/core, called FormControl and InputLabel. We will use FormControl component to wrap our Select component. This is so that with-in the same FormControl, we can add an InputLabel called 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 makeStyles from @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 onChange on 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 handleChange to 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!