When using the React scroll library available here https://www.npmjs.com/package/react-scroll, there is a strange behaviour which introduces potential bugs and for which I haven't find a plausible solution yet.
Here is the complete code for reproducing the bug, I will explain it briefly just below the code sample.
import { Element } from 'react-scroll'
function App() {
const [data, setData] = useState([])
useEffect(() => {
setData([
{'id': 1, 'name': 'JavaScript'},
{'id': 2, 'name': 'jQuery'}
])
}, [])
return (
<div className="App">
{
data && data.map(item =>
<Element id={item.name} name={item.name} key={item.id}>{item.name} {item.name}</Element>)
}
</div>
);
}
It is pretty clean code. I have data state variable consisting of an array of objects which I want to iterate over and print each object's name property inside a div. Instead of div, I am using the <Element/> tag which is imported from the react-scroll package so that I can have a scroll spy functionality in the menu which will show the active section as the user scrolls through the page.
Now the issue is that whatever I put in the id attribute of this Element tag, gets binded to the window object. So in this case, window.JavaScript will be binded to the concrete DOM element containing the text JavaScript, and window.jQuery will be binded to the DOM element containing the text jQuery. Here are screenshots from the JavaScript console:
And if I click any of these logs, it takes me, clearly, to the respective DOM element:
This is how I actually found the bug, after binding jQuery to the window object, the imported jQuery library stopped working (don't ask why I use jQuery with React :D). The solution that is working so far is changing id={item.name} to id={item.id} so binding a number to the window object, but still, I wanna know if there is a reason each name is bound to window and whether that can be disabled.

