Using jquery toggle() method inside JSX

The situation is: the project is undergoing a react upgrade process (from 0.14.8 to 17.02). Jquery version remains 3.5.1.
One of the UI elements has a popup toggle which is implemented like this:

const overlay = (
  <div className="type-selector">
    <button onClick={() => $('.popover-container').toggle()}>
      <img src={'someicon.png'} />
    </button>

    <div className="popover-container">
      <Button onClick={() => next('ONE')}>Option 1</Button>
      <br />
      <Button onClick={() => next('TWO')}>Option 2</Button>
      <br />
      <Button onClick={() => next('THREE')}>Option 3</Button>
    </div>
  </div>
);

ReactDOM.render(overlay, buttons[i]);

Before the react upgrade clicking the top button element toggled the popover-container div visibility. After the upgrade this is no longer working. The inline style display: block/none is not being added to the "popover-container" div.

You need to sign in to view this answers