Estoy tratando de cambiar el color de fondo del elemento select en función de la opción que seleccione el usuario. Creé este ejemplo https://codepen.io/lordKappa/pen/YzrEWXd y aquí el color cambia, pero también cambia para todos los elementos select , no solo para el que cambiamos.
const [selectState, setSelectState] = useState("To-do"); const [taskID, setTaskID] = useState(); function handleDropdownChange(e) { var taskID = e.currentTarget.getAttribute("data-index"); setTaskID(taskID); setSelectState(e.target.value); } if (selectState === "To-do") { selectStyle = { backgroundColor: "red", }; } else if (selectState === "Done") { selectStyle = { backgroundColor: "green", }; } else { selectStyle = { backgroundColor: "yellow", }; } return ( <div className="box"> <div> {elementList.map((task) => ( <div key={task.id}> <h1>{task.info}</h1> <select onChange={handleDropdownChange} data-index={task.id} style={selectStyle} > <option value="To-do">To-do</option> <option value="Done">Done</option> <option value="In progress">In progress</option> </select> </div> ))} </div> </div> ); };El color cambia en todos los menús desplegables en el lápiz de código que proporcionó porque todos dependen del mismo estado. Debe hacer que el estado de cada menú desplegable sea independiente entre sí o separar el menú desplegable en su propio componente.
Debes crear un estado para las tareas.
const [tasks, setTasks] = useState([ { id: 0, info: "Task 1", status: 'TODO' }, { id: 1, info: "Task 2", status: 'TODO' }, { id: 2, info: "Task 3", status: 'TODO' } ]); Luego, cada vez que cambie el cuadro de selección, actualice el status dentro del estado de las tasks
function handleDropdownChange(e) { var taskID = e.currentTarget.getAttribute("data-index"); setTasks(tasks.map(task => { if (taskID !== task.id) return task; task.status = e.target.value return task })); }Finalmente, al renderizar tareas, solo necesitamos verificar el estado de la tarea y cambiar el estilo.
{elementList.map((task) => { // put your condition here .... return ( <div key={task.id}> <h1>{task.info}</h1> <select onChange={handleDropdownChange} data-index={task.id} style={selectStyle} > <option value="To-do">To-do</option> <option value="Done">Done</option> <option value="In progress">In progress</option> </select> </div> ) })}