From 22234492e6b371744e547db20769500b984600ef Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 29 Oct 2015 16:23:02 +0100
Subject: [PATCH] Refactor ModalWrapper to not require a trigger component

---
 js/components/ascribe_modal/modal_wrapper.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/js/components/ascribe_modal/modal_wrapper.js b/js/components/ascribe_modal/modal_wrapper.js
index 5c3ce742..6c9f274e 100644
--- a/js/components/ascribe_modal/modal_wrapper.js
+++ b/js/components/ascribe_modal/modal_wrapper.js
@@ -7,7 +7,7 @@ import Modal from 'react-bootstrap/lib/Modal';
 
 let ModalWrapper = React.createClass({
     propTypes: {
-        trigger: React.PropTypes.element.isRequired,
+        trigger: React.PropTypes.element,
         title: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element,
@@ -38,7 +38,7 @@ let ModalWrapper = React.createClass({
         });
     },
 
-    handleSuccess(response){
+    handleSuccess(response) {
         this.props.handleSuccess(response);
         this.hide();
     },
@@ -52,17 +52,19 @@ let ModalWrapper = React.createClass({
     },
 
     render() {
-        // this adds the onClick method show of modal_wrapper to the trigger component
-        // which is in most cases a button.
-        let trigger = React.cloneElement(this.props.trigger, {onClick: this.show});
+        const { trigger, title } = this.props;
 
+        // If the trigger component exists, we add the ModalWrapper's show() as its onClick method.
+        // The trigger component should, in most cases, be a button.
+        let clonedTrigger = React.isValidElement(trigger) ? React.cloneElement(trigger, {onClick: this.show})
+                                                          : null;
         return (
             <span>
-                {trigger}
+                {clonedTrigger}
                 <Modal show={this.state.showModal} onHide={this.hide}>
                     <Modal.Header closeButton>
                         <Modal.Title>
-                            {this.props.title}
+                            {title}
                         </Modal.Title>
                     </Modal.Header>
                     <div className="modal-body" >