React JS doesn't render after function is done

Question

const handleMenu = async () => {
        let menu = await document.querySelector('.navbar-list');
        menu.classList.toggle('.navbar-list-active');
    }

return (
    <div className="navbar-list">
                    <div onClick={handleMenu} className="hamburger">
                    </div>
    </div>
)

The thing is that after class is added to component it really added on the element, but the CSS styling doesn't appear on the element with added class, is this something React is doing? How can I force CSS to re-render the page?

why the await? Queryselector isnt asyncrhonous

Chris
– Chris

2021-02-20 22:18:30 +00:00
Commented Feb 20, 2021 at 22:18 — Chris
– Chris, Commented Feb 20, 2021 at 22:18

Quentin · Accepted Answer · 2021-02-20 22:37:29Z

1

await doesn't do anything useful unless the value you are awaiting is a promise. querySelector returns either null or an element: never a promise. Your code won't wait for the element to exist.

Now, you can use useRef to get a reference to the element which would then let you toggle the class on it… but don't.

The React way to solve this problem is to store the toggled state in the state and deal with it in the JSX.

const MyComponent = () => {

    const [active, setActive] = useState(false);

    const classNames = ["navbar-list"];
    if (active) classNames.push("navbar-list-active"); 

    const handleMenu = () => setActive(!active);

    return (
        <div className={classNames}>
            <button onClick={handleMenu} className="hamburger">
                Toggle Menu
            </button>
        </div>
    ;)
}

Note that I've changed the div to a button. This is an important accessibility feature and allows the menu to be activated by people who don't use a pointing device to access a page. There is more you should do for accessibility and this article is a good starting point (although it uses traditional DOM instead of React so you'll need to adapt it to use state as I did here).

edited Feb 20, 2021 at 22:37

answered Feb 20, 2021 at 22:19

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Terkinas Over a year ago

I did the way you told, but still style doesnt appear on element when is active, any suggestions?

Quentin Over a year ago

It's hard to tell why your attempt failed without a minimal reproducible example (the first version of mine forgot to include the handleMenu function so it would have errored at the rendering stage so you can't have been using my code unmodified).

Collectives™ on Stack Overflow

React JS doesn't render after function is done

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related