I am not sure why this line of code is returning an error, but I have spent hours on it and I have yet to understand why. I have a div element in the navigation bar with a module class that does not have any changed property within the CSS file, it is just a block. (I have used a module class that does have properties changed within the CSS file but the error has persisted). I did try it with a regular class and the Queryselector found the element, but in this project, I need to use modules. Can anyone please help me understand why this Queryselector returns null when trying to access the div element?
const Nav = () => {
useEffect(() => {
// console.log(document.querySelector('.testing'))
window.addEventListener('click', (e) => {
// console.log(document.querySelector('.testing'))
if(document.querySelector(`.${styles.testing}`).contains(e.target)){
// is not able to find the element with the className 'testing'
// irrelevant code here
}
})
}, [])
return (
<>
<div className={`${styles.user_interaction_container} ${styles.list}`}>
<a href="https://www.google.com/">
<img src={search} alt="Search" width="16px" height="16px"></img>
</a>
<a href="https://www.google.com/">
<img src={heart} alt="Liked" width="16px" height="16px"></img>
</a>
<a href="https://www.google.com/">
<img src={cart} alt="Cart" width="16px" height="16px"></img>
</a>
</div>
<div className={styles.testing}>
<img src={menu} alt="Menu" width="20px" height="20px"></img>
</div>
</>
)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.4.2/react-dom.min.js"></script>Code doesn’t work but I just wanted to show what it looks like. Here is a screenshot of the issue (All of the other Queryselectors work)
What I don’t understand is how it is able to find other elements identically called but can’t access this specific class??
Any help would greatly be appreciated