title: Rendering a React component inside a Bootstrap popover
body: <p>I have a set of images that have popovers using the bootstrap popover ui component  in the content attribute/parameter i would like to add the ReactJS MusicList Component but I couldn't figure out the syntax or whether it's possible or not.</p>
  
  <pre><code>var MusicList = React.createClass({
      render : function(){
          return(&lt;ul&gt;&lt;li&gt;Here&lt;/li&gt;&lt;/ul&gt;);
      }
  });
  
  var PopoverImage = React.createClass({
      componentDidMount:function(){
  
          $("#"+this.getDOMNode().id).attr('data-component','&lt;span&gt;here&lt;/span&gt;');
          $("#"+this.getDOMNode().id).popover({
              html:true,
              content: 
              });
      },
  
      render:function(){
          return(
              &lt;img href="#" id={this.props.friend.uid+'_popover'} data-html={true} className="smallImage" src={this.props.friend.pic_small} rel="popover" data-original-title={this.props.friend.name} /&gt;
  
                  );
      }
  });
  </code></pre>