Refs

"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...