Atributy value v selektu v Reactu

Nyní mějme v tagu option atributy value:

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

V tomto případě díky přítomnosti atributů value se do stavu dostanou právě jejich hodnoty, a ne texty tagů option. Můžeme se o tom přesvědčit výsledek výběru do odstavce:

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>
			váš výběr: {value}
		</p>
	</div>;
}

Oddělení textu option a jeho hodnoty může být výhodné: text tagu můžeme měnit jak chceme, přičemž v našem skriptu bude výsledek výběru zpracován podle hodnoty atributu value, která zůstane nezměněna.

Podívejte se na příklad:

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' && 'vybrali jste první položku'}
			{value === '2' && 'vybrali jste druhou položku'}
			{value === '3' && 'vybrali jste třetí položku'}
		</p>
	</div>;
}

Nyní, pokud změníme texty tagů option, práce skriptu se nenaruší - protože je vázána na hodnotu atributu value.

Pomocí rozbalovacího seznamu nabídněte uživateli vybrat, do které věkové skupiny patří: od 0 do 12 let, od 13 do 17, od 18 do 25, nebo starší 25 let.