Атрибути value у селекту у React-у

Нека сада у таговима option постоје атрибути value:

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

У таквом случају због присуства атрибута value у стејт ће упадати њихове вредности, а не текстови тагова option. Може се уверити у ово, исписавши резултат избора у пасус:

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}
		</p>
	</div>;
}

Раздвојити текст option и његову вредност може бити згодно: текст тага можемо мењати како нам је воља, при томе у нашем скрипту резултат избора ће се обрађивати по вредности атрибута value, који ће остати непромењен.

Погледајте пример:

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' && 'изабрали сте прву ставку'}
			{value === '2' && 'изабрали сте другу ставку'}
			{value === '3' && 'изабрали сте трећу ставку'}
		</p>
	</div>;
}

Сада, ако изменимо текстове тагова option, рад скрипта се неће пореметити - јер је он везан за вредност атрибута value.

Помоћу падајућег списка понудите кориснику да изабере којој старосној групи припада: од 0 до 12 година, од 13 до 17, од 18 до 25, или старији од 25 година.