En React, existen muchas maneras de insertar datos en un formulario para que sean procesados. A estos los conocemos como inputs. En este post, te enseñaremos qué es y cómo funciona la etiqueta select en React, uno de los inputs disponibles en esta librería.
¿Qué es select en React o select in React?
La etiqueta select en React (select in React) es una de las opciones que tenemos disponibles para crear inputs en un formulario. Es decir, al igual que el input de tipo radio, textarea y el input de tipo checkbox en React, la etiqueta select nos permite crear un espacio donde el usuario podrá interactuar con nuestra aplicación y darnos datos. Con estos datos, podremos ejecutar diversas acciones. La acción más común es enviarlos a nuestro servidor para ser procesados, con el fin de obtener algo en retorno.
Ten en cuenta que React nos permite ejecutar muchas acciones con el elemento form. Por ello, te invitamos a consultar la documentación sobre formularios en reactjs.org.
De manera conceptual, la etiqueta select en React se comporta igual que un input de tipo radio. Como puedes leer en nuestro post sobre el input de tipo radio y textarea en React, cuando usamos el type=»radio» normalmente manejamos varios valores entre los que el usuario puede elegir. Entonces, cuando insertamos la etiqueta select en React, estamos creando un elemento desplegable en el que tendremos varias opciones. Entre estas opciones, el usuario puede elegir una.
¿Cómo funciona select en React?
La etiqueta select no solo existe en React (select in React), también se maneja en HTML, un lenguaje de programación que React usa como inspiración. En HTML, select se maneja con la etiqueta option, con la que creamos las distintas opciones de nuestro elemento desplegable. A continuación, puedes ver un ejemplo de select React JS:
<select>
<option>Option 1 </option>
<option>Option 2 </option>
<option>Option 3 </option>
</select>
Una vez pintes estas líneas de código, verás en pantalla un elemento desplegable con las distintas opciones que hemos definido de select React JS. Para controlar este select en React (select React), usaremos la propiedad value. Esta propiedad también se usa para controlar otros input, como textarea y el input de tipo text. Para conocer más sobre este tema, te invitamos a leer nuestro post sobre controlar input en React. Al igual que con estos input, debemos hacer uso del evento onChange en React para capturar el evento y ejecutar acciones con sus datos.
<select value= «» onChange {event => console.log (event)}>
<option>Option 1 </option>
<option>Option 2 </option>
<option>Option 3 </option>
</select>
Ahora, ¿cómo podemos asociar un value que tenemos guardado en un determinado estado con las opciones de nuestro elemento select en React (select React)? Para ello, debemos darle una propiedad value a cada una de las opciones u option React. Esto nos permitirá identificar cada una de ellas y saber cuál fue elegida.
<select value= «» onChange {event => console.log (event)}>
<option value=»1″>Option 1 </option>
<option value=»2″>Option 2 </option>
<option value=»3″>Option 3 </option>
</select>
Entonces, si le pasamos la propiedad value= «1» a nuestro elemento select, quedará seleccionada la Option 1 de la option React. Esto no tiene nada que ver con el nombre que le pasamos a la opción. Simplemente, quedará seleccionada la opción con la misma propiedad value que el elemento select.
Al igual que con otros input, definir una propiedad value en el elemento select hace que no podamos editar la opción desde nuestro navegador. Es decir, no podremos seleccionar ninguna opción que no sea Option 1 de la option React, pues este es el valor definido en nuestro código.
Para hacer esto más dinámico, deberemos crear un estado que guarde los valores de nuestra opción y que se modifique a través del tiempo. Para aprender más sobre el tema, te invitamos a leer nuestro post sobre automatizar evento onChange en React.
¿Quieres seguir aprendiendo?
Ahora que sabes qué es y cómo funciona la etiqueta select en React, ¡estás más cerca de dominar esta poderosa librería JavaScript! Sin embargo, todavía queda mucho por aprender del mundo del desarrollo web. Por ello, te invitamos a seguir aprendiendo en nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva con el que te convertirás en un experto en pocos meses. ¡No te lo pierdas!
