"can't access property "display", document.getElementById(...) is null" after button press to hide div

Question

I'm trying to make my main div's "display:'none'" after a button press. But it's returning an error which appears to state that the getElementByID field is null.

Here's the code snippets that I'm working with:

<div className="content" style={Style}>
        <ButtonGroup variant="contained" color="primary" size="large">
        <Button onClick={() => {this.loadtrainingresources()}}>TRAINING RESOURCES</Button>
        </ButtonGroup>
</div>

loadtrainingresources = () =>{
document.getElementById("content").display = "none";
}

Error Output

Answer 1

You forgot style

document.getElementById("content").style.display = "none";

https://www.w3schools.com/jsref/prop_style_display.asp