CODEWITHSUNDEEP
reactjs
vivek kn
vivek kn

Reputation: 275

set default value for select in react js

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>

Upvotes: 2

Views: 10818

Answers (3)

asad minhas
asad minhas

Reputation: 281

Thanks me later.!!

<Select
      placeholder="Select Option"
      defaultValue={data.find(({ value }) => value != your-selected-value)}
      options={data}
      isMulti
    />

Upvotes: 0

Robin
Robin

Reputation: 5427

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>
  );
}

Upvotes: 1

sedhal
sedhal

Reputation: 520

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>;

Upvotes: 3

Related Questions