Using Form Elements and Semantic UI React: Extracting values

Hi there!
I was in the middle of my React project from one of my courses. In it, I had to build a form and I decided to use Semantic UI React for my project.

It took me quite a few tries to figure out how to extract the information from the values in my form. Some of the form inputs, specifically, using radio buttons and dropdowns were nested using Semantic UI. Having these nested elements, traditional ways of extracting information like e.target.value or e.target.checked did not work. Here is what console.log(e.target) looks like:

You can see it logs the label and not the radio button where we could extract the value.

Luckily, I found an article by Lauren Gifford that explained that Semantic UI React actually passes a data object along with the event object... And so, the heavens opened up!

In order to extract information from Semantic UI React radio buttons or dropdowns, you can include the data parameter to your function. This is what it looks like when I console.log(data):

Here you can see all the keys that are passed, including value! We can now access the values of our dropdowns and radio buttons using data.value. Here is an example of a function using the event and data as parameters:

 function handleChange(e, data) {
    if (data.name === 'typeGroup') {
      setType(data.value)
    } else if (data.name === 'accountGroup') {
      setAccount(data.value)
    } else if (e.target.name === 'notes') {
      setNotes(e.target.value)
    } else if (data.name === 'category') {
      setCategory(data.value)
    }
  }

I hope this helps! Happy coding!