Loading lesson path
A drop down list, or a select box, in React is also a bit different from HTML. In HTML, the selected value in the drop down list is defined with the selected attribute:
<select> <option value="Ford">Ford</option>
Formula
< option value ="Volvo" selected > Volvo </option ><option value="Fiat">Fiat</option> </select> In React, the selected value is defined with a value attribute on the select tag:
React uses the value attribute to control the select box:
function MyForm() {
const [myCar, setMyCar] = useState("Volvo");const handleChange = (event) => {
setMyCar(event.target.value)
}return (<form>
<select value={myCar} onChange={handleChange}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option></select> </form> )
}Example »
<select> element, React is able to handle it as any other input element.