React JSX: selecting “selected” on selected <select> option with default option have issues

Reactjs Library provides two options to handle form elements.

1. Controlled Components - If you need to change something in UI according to the form value, use this option.

import { Component } from "react";

class App extends Component {
  state = {
    gender: "",
  }; // Step 1 - Create a property related to `select` form element in state object

  onChange = (e) => {
    const val = e.target.value;
    e.preventDefault();
    this.setState(() => ({
      gender: val,
    })); // Step 5 - You can update the value by using `setState` 
  }; // Step 3 - Create a method for `select` form element onChange event

  render() {
    return (
      <div className="col-3">
        <select
          name="gender"
          id="id_gender"
          value={this.state.gender} {/* Step 2 - Set that `select` related state property to value attribute */}
          onChange={this.onChange} {/* Step 4 - Set that method to onChange event */}
        >
          <option value="m">Male</option>
          <option value="f">Female</option>
        </select>
      </div>
    );
  }
}

export default App;

2. Uncontrolled Components - If you just need to form data to save in a database, then you can use this option.

import { Component, createRef } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.selectEle = createRef(); // Step 1 - Create the reference
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit = (e) => {
    e.preventDefault();
    alert(this.selectEle.current.value); // Step 3 - You can access to the value like this.
  };

  render() {
    return (
      <div className="col-3">
        <select name="gender" id="id_gender" ref={this.selectEle}> {/* Step 2 - Add the reference to `select` element */}
          <option value="m">Male</option>
          <option value="f">Female</option>
        </select>
        <button type="submit" onClick={this.onSubmit}>
          Submit
        </button>
      </div>
    );
  }
}

export default App;

Instead of defining defaultValue or selected on each option, you can write value={member.gender} on the select tag itself:

<div className="col-3">
  <select name="gender" id="id_gender" value={member.gender}>
    <option value="m" >Male</option>
    <option value="f">Female</option>
  </select>
</div>