title: How do I dynamically change the content of a React Bootstrap modal?
body: <p>I'm trying to change the content of the modal after it has mounted, but I'm not able to find the correct nodes to change. I've attached refs to the nodes I'm interested in and try to alter them in componentDidMount(). But the nodes are not found -- comes up as null. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Modal = ReactBootstrap.Modal;
  
  
  const MyModal = React.createClass({
  
    getInitialState() {
      return { showModal: false };
    },
  
    close() {
      this.setState({ showModal: false });
    },
  
    open() {
      this.setState({ showModal: true });
    },
  
  
    componentDidMount() {
      var theNode = ReactDOM.findDOMNode(this.refs.bigPic);
      var theOtherNode = ReactDOM.findDOMNode(this.refs.bigPicInfo);
      theNode.src = 'http://big-pic.png';
      theOtherNode.innerHTML = "&lt;strong&gt; Something here&lt;/strong&gt;";
    },
  
    render() {
      return (
          &lt;div&gt;
          &lt;Modal show={this.state.showModal} onHide={this.close}&gt;
            &lt;Modal.Header closeButton&gt;
              &lt;Modal.Title&gt;&lt;/Modal.Title&gt;
            &lt;/Modal.Header&gt;
            &lt;Modal.Body&gt;
              &lt;div&gt;&lt;img ref="bigPic" src="" /&gt;&lt;/div&gt;
            &lt;/Modal.Body&gt;
            &lt;Modal.Footer&gt;
              &lt;p ref="bigPicInfo"&gt;&lt;/p&gt;
            &lt;/Modal.Footer&gt;
          &lt;/Modal&gt;
          &lt;/div&gt;
      );
    }
  });
  
  ReactDOM.render(&lt;MyModal/&gt;, document.getElementById("my-modal"));</code></pre>
  </div>
  </div>
  </p>