Как работать с двумя различными входами Select в форме единого реагирования

Question

При размещении двух разных входов выбора в одной форме Informed React и изменении значения одного входа выбора принудительно изменяет значение выбора и на другом входе выбора.

Пожалуйста, найдите пример кода здесь.

       <Form id="text-form" onSubmit={submittedValues=>this.onSave(submittedValues)}>
          {formApi=>(
                    <div class="columns is-mobile">
                        <div class="column ">
                            <div className="textAlignLeft">
                                <label htmlFor="select-status">Y</label>
                                <Select field="status" id="select-status" className="selectStyle">
                                    <Option value="" disabled>
                                    Select One...
                                    </Option>
                                    {_.map(myData,(val) => {
                                        return <Option value={val.y}>{val.y}</Option>
                                    })}
                                </Select>
                            </div>
                        </div>
                        <div class="column ">
                            <div className="textAlignLeft">
                                <label htmlFor="sub-class">X</label>
                                <Select field="status" id="sub-class" className="selectStyle">
                                    <Option value="" disabled>
                                    Select One...
                                    </Option>
                                    {_.map(myData,(val) => {
                                        return <Option value={val.x}>{val.x}</Option>
                                    })}
                                </Select>
                            </div>
                        </div>
                    </div>
           )}
        </Form>

Answer 1

Что я сделал:

      this.setState({
        countries: [{key: '', value: '', display: '(Kies een land)'}].concat(countriesFromApi).map((country) => <option key={country.key} value={country.value}>{country.display}</option>)

и затем в методе рендеринга:

                <div className="col-md-4">
                    <Select field="Country" id="select-status">
                        {this.state.countries}
                    </Select>   
                </div>