Atributos value en select en React

Supongamos que ahora en las etiquetas option tenemos atributos value:

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

En este caso, debido a la presencia de atributos value, en el estado caerán exactamente sus valores, y no los textos de las etiquetas option. Puedes convencerte de esto, mostrando el resultado de la selección en un párrafo:

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>
			su elección: {value}
		</p>
	</div>;
}

Separar el texto option y su valor puede ser conveniente: el texto de la etiqueta podemos cambiarlo como queramos, mientras que en nuestro script el resultado de la selección será procesado por el valor del atributo value, que permanecerá inalterable.

Mira el ejemplo:

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' && 'elegiste la primera opción'}
			{value === '2' && 'elegiste la segunda opción'}
			{value === '3' && 'elegiste la tercera opción'}
		</p>
	</div>;
}

Ahora, si cambiamos los textos de las etiquetas option, el trabajo del script no se verá afectado, porque está vinculado al valor del atributo value.

Con una lista desplegable, ofrece al usuario elegir a qué grupo de edad pertenece: de 0 a 12 años, de 13 a 17, de 18 a 25, o mayor de 25 años.