Quiero agregar una clase activa al indicador después de hacer clic en él, pero la clase activa no aparece aunque list.id === active
const [active, setActive] = useState(1); const scrollToElement = (id, value) => { const element = document.getElementById(`${value}`); element.scrollIntoView({ behavior: 'smooth' }); setActive(prevState => { return { ...prevState, active: id } }); } <div key={list.id} className={`${list.id === active ? `${style.active} ${style.dot}` : `${style.dot}`}`} onClick={() => scrollToElement(list.id, list.name)} />Está devolviendo un objeto para un nuevo valor de estado.
Prueba esto:
const [active, setActive] = useState(1); const scrollToElement = (id, value) => { const element = document.getElementById(`${value}`); element.scrollIntoView({ behavior: 'smooth' }); setActive(id); } <div key={list.id} className={`${list.id === active ? `${style.active} ${style.dot}` : `${style.dot}`}`} onClick={() => scrollToElement(list.id, list.name)} />