How to capture class in reactjs function?

Question

css

I recently started learning React and was wondering how to grab a class from a modular css

const Bar = (props) => {
    return (
        <div className={b.item}>
            <span className={b.name}>{props.nameSkill}</span>
            <div className={b.max_bar}>
                <div className={b.percent_bar} onLoad={bar}>{props.percent}%</div>
            </div>
        </div>
    );
    function bar() {
        const elem = document.querySelector(".percent_bar");
        const w = props.percent;
        const opercent = document.querySelector(".max_bar").style.width / 100;
        elem.style.width = w * opercent + "px";
    }
};

I need to capture an element with the .percent_bar class in the bar function, into the elem variable (which is in the module css, it looks like b.percent_bar in the markup), similarly with the opecent variable. But for some reason it didn’t work for me, even when I tried to insert it in this way

const opercent = document.querySelector(b.max_bar).style.width / 100;

because this is what happens

const elem = document.querySelector(_Bar_module_css__WEBPACK_IMPORTED_MODULE_1___default.a.percent_bar);

How can I grab this class?

Answer 1

div style={{width: props.percent}}
Forget looking for selectors in react and accessing the house tree directly.