Add input value to Semantic UI Dropdown in React

Question

Recently I had a select input, but with a two-way binding to my input fields.The select input has the values of the input fields as it's options. With semantic UI, I need to use an array. How do I update the array state so I can select my inputs in the Dropdown?

I currently have the following code:

this.state = {
      options: []
    };

 onChange(e) {
    var arrayvar = this.state.options.slice();
    arrayvar.push({ name: e.target.name, value: e.target.value });
    this.setState({ options: arrayvar });
  }

//Input example
      <Input
              type="text"
              placeholder="Answer 3"
              name="answer3"
              onChange={this.onChange}
              required
            />

score 1 · Accepted Answer · answered Jan 10 '18 at 18:44

Just use the array index instead of the object key to change the options, an array is a object where the keys are the indexes

handleChange(e){
    const index = parseInt(e.target.name),
        value = e.target.value,
        options = this.state.options.slice();

    options[index] = {value: value, text: value};
    this.setState({options: options});
}

render(){
    return (
      <div>
        <Input 
          name='1'
          placeholder='option' 
          onChange={this.handleChange}
         />
        <Select placeholder='Select your option' 
          options={this.state.options} />
      </div>
    );  
}

code: https://codesandbox.io/s/54wk6y9qrx

Add input value to Semantic UI Dropdown in React

1 Answers1