React Modal ref Undefined! Can't Add Custom Attribute
<p>I have a simple modal:</p>

<pre><code>renderModalForm() {
    return (
      &lt;Modal
        closeTimeoutMS={150}
        show={this.state.isModalOpen}
        onHide={this.isModalOpen.bind(this)}
      &gt;
        &lt;Modal.Body&gt;
          &lt;div className="close-button-modal"&gt;
            &lt;i className="fa fa-times fa-2x pull-right" onClick={this.onButtonClick.bind(this)}&gt;&lt;/i&gt;
            &lt;div className="clearfix"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div ref="test" className="testclassname"&gt;
          &lt;/div&gt;
        &lt;/Modal.Body&gt;
      &lt;/Modal&gt;
    );
  }
</code></pre>

<p>My sole objective is to inject a custom attribute (which unfortunately cannot start with data- or aria- since it's defined by third party) to the <code>div</code> referenced by <code>ref="test"</code></p>

<p>When I attempt to inject the custom attribute:</p>

<pre><code>someButtonClicked() {
    setTimeout(() =&gt; {
      this.setState({
        isModalOpen: true
      })
    }, 100);
    var element = ReactDOM.findDOMNode(this.refs.test);
    element.setAttribute('doku-div', 'form-payment');
}
</code></pre>

<p>Here element is always undefined, so <code>setAttribute</code> failed; if I go inspect the element, <code>ref="test"</code> does not exist at the <code>&lt;div&gt;</code> ! Can someone help me as to why this ref is missing inside modal?</p>