Setting selected option of a select in React
If your select dropdown is a React-controlled element, setting the selected option is easy as setting the controlled state variable value to the option value you want to select. React sets the option that matches the updated control state value.
If you are new to React-controlled components, read this article to learn more about them.
Setting selected option in React-controlled components
Here is a simple code to set the selected option.
const SelectedOption = () =>{
const countries = [
{value: "0", text: "Select"},
{value: "1", text: "USA"},
{value: "2", text: "Canada"},
{value: "3", text: "Japan"},
{value: "4", text: "Mexico"}
]
const options = countries.map((option) => {
return <option value={option.value}>{option.text}</option>
})
const [countryValue, setCountryValue] = useState<string>()
return(
<div>
<div>
<label>Country: </label>
<select value={countryValue} onChange={(e) => setCountryValue(e.target.value)}>
{options}
</select>
</div>
<div>
<button onClick={() => setCountryValue("1")}>USA</button>
<button onClick={() => setCountryValue("2")}>Canada</button>
<button onClick={() => setCountryValue("3")}>Japan</button>
<button onClick={() => setCountryValue("4")}>Mexico</button>
</div>
</div>
)
}
export default SelectedOptionThe state variable countryValue takes care of the selected option. We only need to set the countryValue to the option value we want to set as the default option.
onClick={() => setCountryValue("1")}Setting selected option in uncontrolled components
If your HTML select element is uncontrolled, use the selected property to set the selected option manually.
import { useState } from "react"
const SelectedOption = () =>{
const countries = [
{value: "0", text: "Select"},
{value: "1", text: "USA"},
{value: "2", text: "Canada"},
{value: "3", text: "Japan"},
{value: "4", text: "Mexico"}
]
const [countryValue, setCountryValue] = useState<string>()
const options = countries.map((option) => {
return <option
key={option.value}
value={option.value}
selected={option.value === countryValue}>{option.text}
</option>
})
return(
<div>
<div>
<label>Country: </label>
<select onChange={(e) => setCountryValue(e.target.value)}>
{options}
</select>
</div>
<div>
<button onClick={() => setCountryValue("1")}>USA</button>
<button onClick={() => setCountryValue("2")}>Canada</button>
<button onClick={() => setCountryValue("3")}>Japan</button>
<button onClick={() => setCountryValue("4")}>Mexico</button>
</div>
</div>
)
}
export default SelectedOptionIn the case of an uncontrolled select component, we have to use the selected property of the option to check if the option is selected.
return <option
key={option.value}
value={option.value}
selected={option.value === countryValue}>{option.text}
</option>Related Links
