Accessing input values from a semantic- ui-react dropdown

Photo by Artem Sapegin on Unsplash

This is going to be a very short and sweet post. While working on a project I needed a couple of dropdown selections in my filter component. Handling the events from these drop downs is ever so slightly different to normal inputs. I didn’t find any great sources to how to handle the event besides scrolling through old comments. So Im writing this so that hopefully someone who has the same issue can find the solution a little quicker.

Ok so setting up the basic dropdown with the objects is pretty straight forward and well documented on the semantic-ui-react documentation. I have linked the documentation example, but here is a quick look:

Here you can see you pass an array (could even be a function) with your drop downs options.

The name of the drop down is the same as the key in my app components state that I want to drop down to change.

Normally I would handle the change like so:

However the event.target.name and event.target.value are undefined.

So instead to handle the event you need to write a similar function with some minor changes.

I wasn’t joking when I said this would be a short and sweet one. Hope this helps someone :)