I'm trying to store a DOM element in a variable inside a React component.

I'm declaring this variable inside the `render()` function of the component, like this:

```
render() {
  const aside = document.querySelector('aside');
    ...
    ...
}

```

Given that this is declared before the `return`, I'm guessing that, at the time of this declaration, `const aside` is `null`, and maybe that's why this isn't working.

Where should I be declaring this variable? Or is there a better way to store variables of DOM elements like this in React?

Side question: would this variable be in reference to the browser DOM element or React's virtual DOM element?

Here is the full component:

```
import React, { Component } from 'react';

class Sidebar extends Component {
  render() {
    const aside = document.querySelector('aside');

    function hideSidebar() {
      aside.classList.remove('show');
    }

    function openSidebar() {
      aside.classList.add('show');
      aside.addEventListener('mouseleave', 'hideSidebar');
    }

    return (
        <aside>
          <svg onClick={openSidebar}
            ...
          </svg>
          <ul>
            <li onClick={chooseSvg}>Dreamcast</li>
            <li onClick={chooseSvg}>Jetson</li>
          </ul>
        </aside>
    );
  }
}

export default Sidebar;

```

When I click on the `<svg>` element and it triggers `onClick={openSidebar}`, I get the error:

```
TypeError: Cannot read property 'classList' of null

```