Atribúty value v selecte v React

Nech teraz v našich tagoch option sú atribúty value:

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

V takom prípade, kvôli prítomnosti atribútov value, do stavu sa dostanú práve ich hodnoty, a nie texty tagov option. Môžeme sa o tom presvedčiť výpisom výberu do odseku:

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ýber: {value}
		</p>
	</div>;
}

Oddeliť text option a jeho hodnotu môže byť pohodlné: text tagu môžeme meniť ako chceme, pričom v našom skripte sa výsledok výberu bude spracovávať podľa hodnoty atribútu value, ktorá zostane nezmenená.

Pozrite si prí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 ste prvú možnosť'}
			{value === '2' && 'vybrali ste druhú možnosť'}
			{value === '3' && 'vybrali ste tretiu možnosť'}
		</p>
	</div>;
}

Teraz, ak zmeníme texty tagov option, fungovanie skriptu sa nenarúša - pretože je naviazané na hodnotu atribútu value.

Pomocou rozbaľovacieho zoznamu ponúknite používateľovi vybrať do akej vekovej skupiny patrí: od 0 do 12 rokov, od 13 do 17, od 18 do 25, alebo starší ako 25 rokov.