我想在React中显示一个小吃店

Question

This is the function that is being called on a button click.

handleClick() {
        var x = document.getElementById("snackbar");
        x.className = "show";
        setTimeout(function () {
            x.className = x
                .className
                .replace("show", "");
        }, 3000);
        return (
            <div id="snackbar">DONE</div>
        )
    }

This is my onClick onClick={this.handleClick}

It shows me an error that"Uncaught (in promise) TypeError: Cannot set property 'className' of null" What am I doing wrong. All the help is appreciated.

Answer 1

TypeError: Cannot set property 'className' of null"

Means that you are trying to access the classname property in a null variable.

If var x = document.getElementById("snackbar"); has not results, it will return null, and x will be equal to null. Add console.log(x) after var x = document.getElementById("snackbar"); so you can test if it comes from here.

It can be caused by:

Invalid HTML syntax (some tag is not closed or similar error)
Duplicate IDs - there are two HTML DOM elements with the same ID
Maybe element you are trying to get by ID is created dynamically (loaded by ajax or created by script)?