I'm trying to rewrite one of my JS plugins to react, as a way of learning.

I have a panel that when hidden/shown needs to be updated with several classnames as well as some that need to wait for a css animation to complete (why the timer).

How should I do this in a react way? Using querySelector to change classnames seem very wrong..?

**Detailed explanation**

When showPanel is triggered the following need to happen

* the body/html element need updated css (hence me adding classes)
* an existing overlay fades in (adding a class to that)
* the modal div is displayed (adding a class for that)
* the modal div is told to be active AFTER the animation has been run (hence the timer and class "am-animation-done")

What I preferably would like to have/learn is best practice to do this in reactjs. I'm thinking a toggle state that when triggered sets the state to visible/hidden and if set to "visible" the class changes below happens. My biggest issue is the timer thing.

```
  showPanel = () => {
            document.querySelector('body').classList.add('am-modal-locked');
            document.querySelector('html').classList.add('am-modal-locked');
            document.querySelector('.am-overlay').classList.add('fadein');
            document.querySelector('.am-modal').classList.add('am-show');

            const timer = setTimeout(() => {
                document.querySelector('.am-modal').classList.add('am-animation-done');
            }, 500);
            return () => clearTimeout(timer);
  };

  hidePanel = () => {
            document.querySelector('.am-modal').classList.remove('am-show');
            document.querySelector('.am-modal').classList.remove('am-animation-done');
            document.querySelector('.am-overlay').classList.add('fadeout');

            const timer = setTimeout(() => {
                document.querySelector('.am-overlay').classList.remove('fadein');
                document.querySelector('.am-overlay').classList.remove('fadeout');
                document.querySelector('body').classList.remove('am-modal-locked');
                document.querySelector('html').classList.remove('am-modal-locked');
            }, 500);
            return () => clearTimeout(timer);
    };

```

**Source code updated for clarifaction**