Value-attributen in select in React

Stel dat we nu in de tags option value-attributen value hebben:

function App() {
	return <div>
		<select>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
	</div>;
}

In dat geval, vanwege de aanwezigheid van de attributen value, zullen hun waarden in de state terechtkomen, en niet de teksten van de tags option. We kunnen dit controleren door de keuzeresultaat in een alinea weer te geven:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={(event) => setValue(event.target.value)}>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
		<p>
			uw keuze: {value}
		</p>
	</div>;
}

Het kan handig zijn om de tekst van de option en zijn waarde te scheiden: we kunnen de tekst van de tag naar wens aanpassen, terwijl in ons script de keuzeresultaat wordt verwerkt op basis van de waarde van het attribuut value, die onveranderd blijft.

Bekijk het voorbeeld:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={event => setValue(event.target.value)}>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
		<p>
			{value === '1' && 'u heeft de eerste optie gekozen'}
			{value === '2' && 'u heeft de tweede optie gekozen'}
			{value === '3' && 'u heeft de derde optie gekozen'}
		</p>
	</div>;
}

Als we nu de teksten van de tags option wijzigen, dan wordt de werking van het script niet verstoord - omdat het gekoppeld is aan de waarde van het attribuut value.

Laat de gebruiker met behulp van een dropdown-lijst kiezen tot welke leeftijdsgroep hij behoort: van 0 tot 12 jaar, van 13 tot 17, van 18 tot 25, of ouder dan 25 jaar.