set default value for select in react js

user_17814678 0
Viewed 751

i am trying to set default value that is if this.state.items.gender is female in select option it must show female and if it is male the default value must me male

 <select name="gender"
                      onChange={this.changeHandler}
                      defaultValue={this.state.items.gender}  //onload this value must show in select input
                      required
                      style={styles.select}
                    >
                      <option style={styles.option} value="Male">
                        Male
                      </option>
                      <option style={styles.option} value="Female">
                        Female
                      </option>
                    </select>
reactjs
2 Answers

default value is not working on simple html selection. You can do using the condition in the option in select like this.

<select
  name="gender"
  onChange={this.changeHandler}
   //onload this value must show in select input
  required
  style={styles.select}
>
  <option style={styles.option} value="Male" selected={this.state.items.gender === "Male"}>
    Male
  </option>
  <option style={styles.option} value="Female" selected={this.state.items.gender === "Female"}>
    Female
  </option>
</select>;
user_69279880

This works perfectly fine to me.

import { useState } from 'react';

export default function App() {
  const [gender, setGender] = useState('Female');

  return (
     <select
       name="gender"
       onChange={/* on change handler function */}
       defaultValue={gender}
       required
     >
       <option value="Male">Male</option>
       <option value="Female">Female</option>
     </select>
  );
}
user_73870890
Related