Select
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:
HTML
<select> <option value="Ford">Ford</option> <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:
Example
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> )
}By making these changes to the <select> element, React is able to handle it as any other input element.