Атрибути value во select во 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 во state ќе пристигнуваат токму нивните вредности, a не текстовите на таговите 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 години.