xxxxxxxxxx
<select
defaultInputValue={this.props / this.state / }
or =>
defaultInputValue="string"
/>
xxxxxxxxxx
<div>
<select
value={choice}
defaultValue={"default"}
onChange={(e) => setChoice(e.target.value)}
>
<option value={"default"} disabled>
Choose an option
</option>
<option value={"one"}>One</option>
<option value={"two"}>Two</option>
<option value={"three"}>Three</option>
</select>
<h1>You selected {choice}</h1>
</div>
xxxxxxxxxx
function TheSelectComponent(props){
let currentValue = props.curentValue || "DEFAULT";
return(
<select value={currentValue} defaultValue={'DEFAULT'} onChange={props.onChange}>
<option value="DEFAULT" disabled>Choose a salutation </option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Miss</option>
<option value="5">Dr</option>
</select>
)
}
xxxxxxxxxx
export const SearchParams = ()=>{
const [breed, setBreed] = useState("");
const breedList = ['poodle'];
return (
<form>
<label htmlFor="breed">
Breed
// adding a "value" attribute set on the <select> element below would
// not cause the <option> containing my provided
// "value" to be selected by default, It is just like 'selected'
// in html.
<select id="breed" name="breed" disabled={!breedList.length}
value={breed}
onChange={e=>setBreed(e.target.value)}>
<option value="" />
{breedList.map(breed => (
<option value={breed}>{breed}</option>
))}
</select>
</label>
</form>
)
}