"I think we have used this before," asked Shawn.

"Yeah. What refs do is give us a handle to refer to some part of the component. We have done this in forms. Here, we are using it to get a handle to the modal so that we can invoke the modal() method on top of it."

"This would, in turn, display the modal."

"Now, notice how we are using the getDOMNode() method."

"Yup. What does it do?"

"The getDOMNode() method helps us to get the underlying DOM node, where the React element is rendered. In our case, we want to invoke a method on the DOM node."

"When we call this.refs.timeoutModal, it returns us a ref object of the component."

"This is different from the actual DOM component. It's actually a React-wrapped object. To grab the underlying DOM object, we invoked getDOMNode()."

"Got it."

"Next, we have wrapped all this in a setTimeout call so that we can call it after the React component is successfully rendered and modal content exists on the page.

"Finally, we called $(timeoutModal).modal('show') to invoke the modal!"

"Let's see how our modal looks now."

import React from 'react';

var ModalAlertTimeout = React.createClass({
  componentDidMount(){
    setTimeout(()=> {
      let timeoutModal = this.refs.timeoutModal.getDOMNode();
      $(timeoutModal).modal('show');
    }, 100);
  },

  render() {
    return (

      <div className="modal fade" ref='timeoutModal'>
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
              <h4 className="modal-title">Timeout</h4>
            </div>
            <div className="modal-body">
              <p>The cart has timed-out. Please try again!</p>
            </div>
          </div>
        </div>
      </div>
    );
  }
});
module.exports = ModalAlertTimeout;

"Let's see how this looks now."

"One last thing since we are discussing this, is about DOM. We can invoke getDOMNode() to also get the node for the current component. Therefore, we can simply call this.getDOMNode() and that will also return us an element!"

"Alright, let's do this. We will unmount the modal when someone closes it so that we can invoke it afresh on the second render."

"Let's define a callback method to do just that, as follows:"

unMountComponent () {
    React.unmountComponentAtNode(this.getDOMNode().parentNode);
  }

"Finally, we will set this as a callback on close of our modal, as follows:"

$(timeoutModal).on('hidden.bs.modal', this.unMountComponent);

"With this, we are done! The component will unmount on modal hide."

"Notice how we are using the parentNode attribute on the DOM node to hide the modal. This helps us to get the container on which the React element is and that we are using to remove the modal."

"Nice. That has been a refresher. Thanks Mike!"

With that, the duo headed back to check the various changes they had just done.