Semantic UI React, Dropdown Selection

Question

Please take a look at my code for Dropdown, I'm using the semantic ui react dropdown on an EditProfile component. I have pasted a sample code here, https://codesandbox.io/s/m4288nx4z8, but I could not get it to work because I'm not very familiar with functional components in React, I've always used Class component. But you can check the full code for the whole component below in the github gist. https://gist.github.com/mayordwells/b0cbb7b63af85269091f1f98296fd9bb

Please, I need help on inserting values from multiple select options of a Dropdown into the Database and also a way to display that back upon viewing the profile edit page again.

I'm using semantic-ui-react in react + rails app.

Also when I insert a value using a normal drop down without multiple select, the value gets persisted into the database.

<Dropdown
  placeholder='Select Country'
  fluid
  search
  selection
  options={countryOptions}
  name='country'
  defaultValue={this.state.extraInfo.country}
  onChange={(e) => this.handleExtraInfoChange('country', e)}
/>

This code handles change for the dropdown elements.

handleExtraInfoChange = (name, event) => {
      let value;

      if (event.target.value !== undefined) {
        value = event.target.value;
      } else {
        value = event.target.textContent;
      }

      let newExtraInfo = Object.assign(this.state.extraInfo, { [name]: value })

      this.setState({ extraInfo: newExtraInfo});
    }

But when I visit the page again, I get a white blank in the input box. Here's a screen pic for that. When I comment out the defaultValue or value property(i have tried with defaultValue and value), the white blank disappears, but the value picked by a user is also not seen.

Please advice what is a possible solution to this misbehavior? And what is the best way to insert multiple values into the Database?

Thanks in advance for your time.

Dennie de Lange Dennie de Lange · Accepted Answer · 2018-02-19T17:20:37

A functional component does not have state, it's used for composition; you want to store state, so you either have to create a Component class or you need an external state container like redux.

Semantic UI React, Dropdown Selection

1 Answers