Attributi value nei select in React

Supponiamo ora che nei tag option ci siano gli attributi value:

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

In questo caso, a causa della presenza degli attributi value, nello stato andranno i loro valori, e non i testi dei tag option. Possiamo convincercene visualizzando il risultato della selezione in un paragrafo:

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>
			la tua scelta: {value}
		</p>
	</div>;
}

Separare il testo di option dal suo valore può essere comodo: il testo del tag possiamo cambiarlo come vogliamo, mentre nel nostro script il risultato della selezione verrà elaborato in base al valore dell'attributo value, che rimarrà invariato.

Guarda l'esempio:

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' && 'hai scelto la prima opzione'}
			{value === '2' && 'hai scelto la seconda opzione'}
			{value === '3' && 'hai scelto la terza opzione'}
		</p>
	</div>;
}

Ora, se cambiamo i testi dei tag option, il funzionamento dello script non si interromperà - poiché è collegato al valore dell'attributo value.

Utilizzando un menu a tendina, proponi all'utente di selezionare a quale fascia di età appartiene: da 0 a 12 anni, da 13 a 17, da 18 a 25, oppure oltre 25 anni.