set id in value field of select option in react.js

Question

I have a tblGender table in database having 3 fields fldID, fldName and isActive. tblEmployee table has a foreign key referring to fldID of tblGender. Now I am fetching a gender list from the database and setting it as follows:

Fetching Data:

fetch('api/Employee/GetGenders')
            .then(response => response.json() as Promise<Array<any>>)
            .then(data => {
                this.setState({ genderList: data });
            });

Populating Dropdown:

<select className="form-control" data-val="true" name="FldGender" defaultValue={this.state.empData.FldGender} onChange={e => this.state.empData.FldGender = e.target.value} required>
                            <option value="">-- Select Gender --</option>
                            {this.state.genderList.map(gender =>
                                <option key={gender.fldID} value={gender.fldID}>{gender.fldName}</option>
                            )}
                        </select>

but gender.fldID is not set in the value. Now if I try to set gender.fldName it is successfully set. But I want to get gender.fldID whenever the dropdown is changed. How can I set the fldID and not the fldName in the this.state.empData.FldGender's onChange event?

Answer 1

Looks like you have a typo . You genderList data has fldId but in your code you have mentioned it as fldID . Please change your option as below

<option key={gender.fldId} value={gender.fldId}>{gender.fldName}</option>