Can't externally open modal without error MaterializeCSS

Question

I have a standard modal that pops up on the bottom of the page, and I also have a function creating a number of different components throughout the page, all of which have a 'play' button that when clicked call a function passed in the props that changes the modal's open property

For reference:

  return (
    <div>
        <Period openModal={this.openModal} />
      <Modal
        open={this.state.isOpen}
        options={{
          ...
        }}
        trigger={document.getElementsByClassName('modal-trigger')}
      >
        Song Descp and misc
      </Modal>

    </div>
  );

When the button is pressed, the modal pops up, but soon after I get this error:

TypeError: document.getElementById(...) is null
_handleTriggerClick
node_modules/materialize-css/dist/js/materialize.js:2990

  2987 | var $trigger = $(e.target).closest('.modal-trigger');
  2988 | if ($trigger.length) {
  2989 |   var modalId = M.getIdFromTrigger($trigger[0]);
> 2990 |   var modalInstance = document.getElementById(modalId).M_Modal;
       | ^  2991 |   if (modalInstance) {
  2992 |     modalInstance.open($trigger);
  2993 |   }

I'm infering that it is because I do not have a modal trigger opening the modal.

Answer 1

After contemplating, I went to the button that called the method that triggered the modal and removed the "modal-trigger" class name that I had added to it and it works fine now. I am still not sure if this is the best method to externally trigger the modal.