Controlled Select Dropdown using Semantic UI for React
A brief tutorial on making Semantic’s Dropdown component play nicely with React state.
So you want a selection field in your controlled form. Maybe you want to show a list of departments for a user to choose from. So you do something like this:
<form> <select> <option> Marketing </option>
<option> Design </option>
<option> Accounting <option> </select></form>
And, well, it looks something like this…
So you’re thinking, there’s got to be a better way!
Enter Semantic UI
This library has a bunch of beautiful, pre-styled components that you can incorporate into your projects, including a great Dropdown component which can be configured to do things like search and be clearable.
Nice right?
The only problem is the large warning messages in the Semantic docs indicating that state is not fully managed when using dropdowns. This is terrible news and may cause you to be tempted to scrap the whole idea, trying to make the basic select element work with some intense CSS styling because being able to manage state to get all the appropriate data is, obviously, just that important. Not to worry friend, we have a workaround!
The Setup
First, let’s create a React component that returns a Semantic Form with a Dropdown component.
Next, setup a state variable to keep track of the currently selected user. We want this to always be the most current value indicated by our dropdown.
Now for the options. Semantic’s Dropdown component allows us to pass in an array of objects to be the options for dropdown selection. Each option object must contain the keys: key, value, and text. Key can be any unique identifying property like an ID or a name; this is a React requirement for rendering child elements in a list. Value is the star of the show. This is the piece of information that you are trying to capture in state, it can be any data or datatype that is useful to you. Text is what will actually get displayed in the dropdown and what the user will be choosing between.
Great! Now we can add in our controlled form callback function friends: onChange placed on the Dropdown component and onSubmit placed in the opening tag of the Form component. OnSubmit can handle whatever logic you need to happen after the form is submitted, save the data (hopefully do this first), display it somewhere, go to another page.
OnChange though…
The key to making sure this works
The key to managing state here is going to be in the onChange callback function. It should use Semantic’s data object instead of React’s synthetic event object to capture the value of the option. Turns out this data object contains a bunch of really useful data about whichever option is currently selected, including the value at data.value, and also gets updated each time onChange is called! So, in the callback arguments, we specify BOTH the React e or event and the Semantic data. We will then pass these as arguments into the onChange event handling function. We need both here because only the data object has the necessary option value but if only one argument is specified, only the event will get passed. So we name both and use one.
The last step is going to be to update state with the captured data accessed at data.value. Here we can simply:
Or keep it all in the onChange callback:
The Result
The final code looks like this:
That’s it! Hopefully, this walkthrough will allow you to build fully state managed, beautiful Dropdown features using React and Semantic UI for React!
