title: calling programmatically reactstrap modal for reuse
body: <p>Hi I want to call reactstrap modal object programatically so that I can reuse it and call it depending on what the situation is. Currently I have it working by using props buy passing the modal state as a prop but I want to not have to manage the modal variable on the parent to make sure my code is a bit cleaner. Let me explain what I want to do:</p>
  
  <p>Using the basic modal example in reactstrap I am removing the button since I will not be calling it when a button is clicked and want to create the modal object on the fly.
  This is what I have in mind...</p>
  
  <pre><code>/* Default simple reactstrap modal without button */        
  /*  eslint react/no-multi-comp: 0, react/prop-types: 0 */
  
  import React, { useState } from 'react';
  import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
  
  const ModalExample = (props) =&gt; {
    const {
      buttonLabel,
      className
    } = props;
  
    const [modal, setModal] = useState(false);
  
    const toggle = () =&gt; setModal(!modal);
  
    const onModalLoad = () =&gt; { setModal(true); }
  
    return (
      &lt;div&gt;
        &lt;Modal isOpen={modal} toggle={toggle} className={className} onOpened={onlLoad}&gt;
          &lt;ModalHeader toggle={toggle}&gt;{props.title}&lt;/ModalHeader&gt;
          &lt;ModalBody&gt;
            {props.body}
          &lt;/ModalBody&gt;
          &lt;ModalFooter&gt;
            &lt;Button color="secondary" onClick={toggle}&gt;OK&lt;/Button&gt;
          &lt;/ModalFooter&gt;
        &lt;/Modal&gt;
      &lt;/div&gt;
    );
  }
  
  export default ModalExample;
  </code></pre>
  
  <p>Then I want to create the object on the fly by calling something like:</p>
  
  <pre><code>   const parentComponent = () =&gt; { 
  
  const submitForm = event =&gt; {
     if (condition1) { 
        React.createElement( ModalExample, {title: 'issue1', 'this is the problem'} ); 
    }else if (condition2) { 
        React.createElement( ModalExample, {title: 'issue2', 'this is the problem'} ); 
    }else if (condition3) { 
        React.createElement( ModalExample, {title: 'issue3', 'this is the problem'} ); } 
    }
  }
  
      return (
      &lt;span &gt;
     &lt;Form onSubmit={submitForm}&gt;
       &lt;Button color="primary" type="submit"&gt;
           Submit
       &lt;/Button&gt;
    &lt;/Form&gt;
    &lt;/span&gt; 
      )
  }
  </code></pre>
  
  <p>This is somewhat similar to what is talked about on the link <a href="https://stackoverflow.com/questions/29471368/how-to-open-close-react-bootstrap-modal-programmatically">How to open/close react-bootstrap modal programmatically?</a> but this option is not quite talked about and it is not working for me. Not sure what I am missing.</p>