Atribut value dalam Select di React

Sekarang anggaplah dalam tag option terdapat atribut value:

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

Dalam kasus seperti ini, karena adanya atribut value, nilai merekalah yang akan masuk ke state, bukan teks dari tag option. Hal ini dapat dibuktikan dengan menampilkan hasil pilihan ke dalam paragraf:

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

Memisahkan teks option dan nilainya dapat menjadi lebih mudah: teks tag dapat kita ubah sesuka kita, sementara di dalam skrip kita hasil pilihan akan diproses berdasarkan nilai atribut value, yang akan tetap tidak berubah.

Lihat contoh:

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' && 'Anda memilih opsi pertama'}
			{value === '2' && 'Anda memilih opsi kedua'}
			{value === '3' && 'Anda memilih opsi ketiga'}
		</p>
	</div>;
}

Sekarang, jika kita mengubah teks tag option, kerja skrip tidak akan terganggu - karena skrip terikat pada nilai atribut value.

Dengan menggunakan dropdown, minta pengguna untuk memilih kelompok usia mana yang termasuk di dalamnya: 0 hingga 12 tahun, 13 hingga 17, 18 hingga 25, atau lebih tua dari 25 tahun.