🔘 Implementar select y listas desplegables en formularios React

🔘 Implementar select y listas desplegables en formularios React

En React, los <select> y las listas desplegables se manejan de manera similar a los inputs de texto: controlando el valor seleccionado mediante el state y el evento onChange. Esto nos permite reaccionar automáticamente a los cambios de selección y procesar los datos de manera dinámica.

---

1️⃣ Select simple controlado

Ejemplo de un select donde el valor seleccionado se guarda en el estado:

function App() {
  const [color, setColor] = React.useState("rojo");

  return (
    <div>
      <label>Selecciona un color:</label>
      <select value={color} onChange={e => setColor(e.target.value)}>
        <option value="rojo">Rojo</option>
        <option value="verde">Verde</option>
        <option value="azul">Azul</option>
      </select>
      <p>Color seleccionado: {color}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

Selecciona un color: Rojo Verde Azul

Color seleccionado: …

---

2️⃣ Select con múltiples opciones dinámicas

Podemos generar opciones dinámicamente a partir de un array:

function App() {
  const colores = ["Rojo", "Verde", "Azul", "Amarillo"];
  const [color, setColor] = React.useState(colores[0]);

  return (
    <div>
      <label>Selecciona un color:</label>
      <select value={color} onChange={e => setColor(e.target.value)}>
        {colores.map(c => (
          <option key={c} value={c}>{c}</option>
        ))}
      </select>
      <p>Color seleccionado: {color}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

Selecciona un color: Rojo Verde Azul Amarillo

Color seleccionado: …

---

3️⃣ Buenas prácticas

• ✅ Usar value y onChange para controlar el select.
• ✅ Generar opciones dinámicamente desde arrays para facilitar mantenimiento.
• ✅ Mantener nombres claros para los name y value de cada opción.
• ✅ Evitar manipular el DOM directamente; siempre usar el estado de React.

← Volver al índice