title: React, props inside data-target for Modals
body: <p>I have a component that is rendering multiple instances. each element has a button that opens a Modal.</p>
  
  <p>Inside the button please notice the data-target format is "#varName", in this case I'm getting the varName from {'#'+this.props.id}(this is a long string like.. "5a1af3a7c7f04418b44d8c0b") and using the same id for the name of the button just for testing purposes.</p>
  
  <pre><code>&lt;button type="button" className="btn btn-primary btn-block" data-toggle="modal" data-target={'#'+this.props.id}&gt;{this.props.id}&lt;/button&gt;
  
  
  
  
      {/*Modal Start*/}
  &lt;div className="modal fade" id={this.props.id} role="dialog"&gt;
      &lt;div className="modal-dialog modal-lg"&gt;
        &lt;div className="modal-content"&gt;
          &lt;div className="modal-header"&gt;
            &lt;button type="button" className="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
            &lt;h4 className="modal-title"&gt;{this.props.name}&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div className="modal-body"&gt;
            &lt;p&gt;This is a large modal.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div className="modal-footer"&gt;
            &lt;button type="button" className="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  {/* Modal end */}
  </code></pre>
  
  <p>Running the code just as it is will display a blur screen, as if the data-target and the id inside the modal were different but they arent.</p>
  
  <p>when using hard coded data like  data-target="#test" and id="test" the modal works on all the instances but the modal display the information of the first one only.</p>
  
  <p>I'm having a really hard time over this. :(</p>