Así que tengo una barra lateral, y cuando hago clic en uno de los elementos, debería desplazarse a div con un nombre determinado. Funcionó antes, pero decidí agregar la clase 'activa' al elemento en el que se hizo clic para cambiar su color, y dejó de desplazarse a divs.

Archivo Sidebar.jsx:

 import React, { useState} from 'react'; import './Sidebar.scss'; import { SlidebarData } from "./SlidebarData"; import spike from '../../assets/spike_pic.jpg'; const Sidebar = () => { const [sideBar, setSidebar] = useState(false); const [selectedLink, setSelectedLink] = useState(""); return ( <div className="sidebar"> <span className="btn" onClick={() => setSidebar(!sideBar)}>Menu</span> <div className="profile"> <img src={spike}/> <span>Alim Budaev</span> <span>Available for work</span> </div> <ul className="sidebarlist" id={sideBar ? "hidden" : ""}> {SlidebarData.map((val,key) =>{ return ( <li className={`row ${selectedLink === val.link ? "active" : ""}`} id={val.link} key={key} onClick={()=> { setSelectedLink(val.link); document.getElementById(val.link).scrollIntoView(); }}> {""} <div> {val.title} </div> </li> ); })} </ul> </div> ); } export default Sidebar;

Como puede ver, tengo un gancho setState para el enlace seleccionado, que agrega una clase activa, pero scrollIntoView no funciona debido a eso, y no puedo entender por qué.

SidebarData.jsx, de donde obtengo enlaces:

 export const SlidebarData = [ { title: "Home", link: "home" }, { title: "About", link: "about" }, { title: "Services", link: "services" }, { title: "Contact", link: "contact" } ]