Flash cards
Review the key moves
What is the main idea behind React Forms - Select?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<___> <option value="Ford">Ford</option> <option value="Volvo" selected>Volvo</option> <option value="Fiat">Fiat</option> </select>Put the learning moves in the order that makes the concept easiest to apply.
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.