Using document.getElementById with css modules

October 1, 2022

I need to get an element, the element in question is using a css module. The problem that after rendering its id changes, so document.getElementById("modal") returns me null

import React from "react";

export const HandleClick = (event: React.MouseEvent<HTMLDivElement>) => {
    event.preventDefault();
    console.log(document.getElementById("modal"))
}

import React, { FC, useEffect, useState } from 'react'
import { HourContent } from '../../../utils/types';
import style from "./index.module.scss";
import { TbList, TbCalendar } from "react-icons/tb"


type Props = {
    HourContent: HourContent;
}

const MoreDettailsClass: FC<Props> = ({ HourContent }) => {

    return (
        <div id={style.modal} className="open">
            <div className={style.container}>
                <div className={style.emoji}>📒</div>
                <div className={style.nome}>Matematica</div>
                <div className={style.props}>
                    <div className={style.iconDescription}>
                        <TbList className={style.icon} />
                        <span>Tags</span>
                    </div>
                    <div className={style.tag}>Matematica</div>
                </div>
                <div className={style.props}>
                    <div className={style.iconDescription}>
                        <TbCalendar className={style.icon} />
                        <span>Creato</span>
                    </div>
                    <div className={style.tag}>07/08/2022</div>
                </div>
                <hr className="hr" />
                <div className={style.description}>
                    <h2 className="h2">Description</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nam expedita neque cum beatae officia incidunt modi voluptatem soluta, distinctio voluptates impedit eligendi amet qui, fuga perferendis nisi ratione fugiat!</p>
                </div>
            </div>
        </div>
    )
}

export default MoreDettailsClass

>Solution :

Reference the module, style, in your case:

import React from "react";
import style from "./index.module.scss"; // <-- HERE

export const HandleClick = (event: React.MouseEvent<HTMLDivElement>) => {
    event.preventDefault(); 
    console.log(document.getElementById(style.modal)) // <-- HERE
}