Tengo algunos botones de selección que se muestran dinámicamente según el usuario. La user.subscription Los valores en el usuario. La user.subscription puede ser un paquete de 2 meses, un paquete de 3 meses, un paquete de 6 meses, un paquete de 12 meses,
por lo tanto, el valor en user.subscription` debe seleccionarse como predeterminado cuando el mapeo se carga en todos
también debe haber diferentes colores para el fondo del botón seleccionado en función del botón de selección predeterminado
si
El paquete de 2 meses es el predeterminado, luego el color defaultcolor debe ser rojo
si
El paquete de 3 meses es el predeterminado, luego el color defaultcolor debe ser verde
si
El paquete de 6 meses es el predeterminado, luego el color defaultcolor debe ser amarillo
si
El paquete de 12 meses es el predeterminado, luego el color defaultcolor debe ser naranja
{ data.map((user) => ( <select value={user.subscription} style={{ background: defaultcolor }} onChange={handleBackground} > <option value="white"> 2 month package</option> <option value="green">3 month package</option> <option value="red">6 month package</option> <option value="yellow">12 month package</option> </select> )); }puede sostener un pequeño objeto de 'configuración' como este:
const monthToColor = { 2: 'red', 3: 'green', 6: 'yellow', 12: 'orange' }Las claves deben coincidir con las opciones de suscripción de usuario que tiene.
Ahora, para cada opción, agregue un estilo con el color de fondo de: monthToColor[user.subscription] así:
<option style={{ backgroundColor: monthToColor[user.subscription] }}> months </options>