Setting selected option of a select in React

Last updated : 27 July 2022

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 SelectedOption
Set selected option of a react controlled select
Figure 1: Set selected option of a react controlled select

The 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 SelectedOption

In 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>
Lance
By: Lance
Lance is a software engineer with over 15 years of experience in full-stack software development.
Read more...

Leave a comment

No Comments