Невозможно изменить значение по умолчанию <select>, используя состояния реакции

Question

Я пытаюсь изменить значение по умолчанию, используя состояние реакции, но он просто игнорирует состояние и принимает первое значение в списке

function EditGendr(props) {
  return (
    <div className="EditProfileDropElement">
      <p className="editMetaData">{props.metaData}</p>
      <select
        id={props.id}
        className={props.class}
        defaultValue={props.value}
        onChange={props.handeler}
      >
        <option value="Male">Male</option>
        <option value="female">Female</option>
      </select>
    </div>
  );
}

, этот компонент просто отображает для пола

         <EditGendr
              id="gender"
              metaData="Gender"
              value={this.state.gender}
              class="editInput"
              handeler={this.genderHandelChange}
            />

это состояние:

constructor(props) {
super(props);
this.state = {
  email: "",
  gender: "",
  dateOfBirth: "",
  country: "",
  displayName: "",
  password: "",
  formNotValid: "",
  formSaved: "",
  formErrors: {
    emailError: "",
    displayNameError: "",
    passwordErorr: ""
  }
};

здесь, где я устанавливаю значение с локального сервера

 componentDiMount() {
    axios
      .get("http://localhost:3000/me")
      .then(response => {
        console.log(response);
        this.setState({
          email: response.data.email,
          gender: response.data.gender,
          dateOfBirth: response.data.birthDate,
          displayName: response.data.displayName,
          country: response.data.country
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

это то, что я получил, но это не так правильный это правильный вариант

Answer 1

В <select> вы должны указать value, а не defaultValue. Так что ваш jsx будет выглядеть так:

<select
  id={props.id}
  className={props.class}
  value={props.value}
  onChange={props.handeler}  
>