I want to add an active class to the indicator after clicking it but the active class doesn't render even though 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)}
/>
You are returning an object for a new state value.
Try this:
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)}
/>