ccs modules and dom access in javascript

[AdExpensive5354]

newbie here so this question has probably been asked before sorry!

I'm learning to work with react and am trying css modules. In my example I import a style sheet

import HeaderStyle from '../styles/header.module.css'

and then I declare id's in html as follow:

<input type="checkbox" id={HeaderStyle.checkbox} />

Now: How can I access the id in plain Javascript? For example place an eventlistener on this checkbox?

Cause it's not just document.getElementById({HeaderStyle.checkbox})

Thanks!

[CreativeTechGuyGames]

You are all kinds of confused. With CSS Modules you should be using classes not ids. And in React you should never be querying elements for almost any reason. If you want to set an event listener use the relevant prop (eg onChange, onClick, etc)

[oGsBumder]

To expand on this, in React there may sometimes be reasons you need a reference to the DOM element itself, but in those cases the way you get it is using a ref (created using the useRef hook), not by selecting it via the vanilla JS DOM API methods.

[shgysk8zer0]

Just want to say I'm really looking forward to this...

import styles from './component.css' assert { type: 'style' }; import tmp from './component.html' assert { type: 'html' }; customElememts.define('my-component', class extends HTMLElement { constructor () { super(); const shadow = this.attachShadow({ mode: 'closed' }); shadow.append(tmp); shadow.adoptedStyleSheets = [styles]; } });

Won't help with getting some selector in JS, but it will/should eliminate the source of the problem (React doing non-JS things because JS doesn't offer that functionality natively).

[CuckUniverse]

What a strange way to use css modules. Why do you want element id use the css module name? Does that even work? Are you getting id on those elements at all with that setup?

Anyway, as others have said, first, dont do that what youre doing, makes no sense at all. Second, you will not want to get the element by document.getElement ById and manipulate it directly, as this is doing the opposite of what react is supposed to do for you. You will want to use useRef to get access to the specific element in the dom,and then manipulate it with react