I was trying to create a pop over for one of my elements which are using react and bootstrap.

Following is my React Code:-

class Share extends React.Component{
   render(){
      return(
        <div>hello</div>
      );
    }
  }

  var shareRenderFunc=function() {
     ReactDOM.render(
      <Share/> , document.getElementById('shareContainer')
  );
 }

Following is my jquery called the shareRenderFunc() :-

var popOverSettings = {
placement: 'bottom',
container: 'body',
selector: '[rel="popover"]', 
content: function(){
  window.shareRenderFunc();
  return $('#shareContainer').html();
  }
}

$('body').popover(popOverSettings);

Following is my HTML containing the popover element:-

<div className="like-share icons-gray-black">
      <a href=""><span><i className="fa fa-heart" aria-hidden="true"></i></span></a>
      <a><span><i className="share-social fa fa-share-alt" rel="popover" aria-hidden="true"></i></span></a>
</div>

But in the console I am getting TypeError saying shareRenderFunc is not a function

P.S: the reactjs file is loaded before the jquery file so the function called is already there, i tried same by creating another javascript file and calling function present in there and it seems to be working fine.

I was trying to create a pop over for one of my elements which are using react and bootstrap.

Following is my React Code:-

class Share extends React.Component{
   render(){
      return(
        <div>hello</div>
      );
    }
  }

  var shareRenderFunc=function() {
     ReactDOM.render(
      <Share/> , document.getElementById('shareContainer')
  );
 }

Following is my jquery called the shareRenderFunc() :-

var popOverSettings = {
placement: 'bottom',
container: 'body',
selector: '[rel="popover"]', 
content: function(){
  window.shareRenderFunc();
  return $('#shareContainer').html();
  }
}

$('body').popover(popOverSettings);

Following is my HTML containing the popover element:-

<div className="like-share icons-gray-black">
      <a href=""><span><i className="fa fa-heart" aria-hidden="true"></i></span></a>
      <a><span><i className="share-social fa fa-share-alt" rel="popover" aria-hidden="true"></i></span></a>
</div>

But in the console I am getting TypeError saying shareRenderFunc is not a function

P.S: the reactjs file is loaded before the jquery file so the function called is already there, i tried same by creating another javascript file and calling function present in there and it seems to be working fine.

• javascript
• jquery
• twitter-bootstrap
• reactjs

• No idea, it should work. What is the type of shareRenderFunc? console.log(typeof window.shareRenderFunc); – vijayst Commented Jun 8, 2016 at 8:35
• How are you including the React code in your HTML? Are you using webpack, or via babel? As your code is JSX, it'd need to be transpiled into Javascript. The transpilation must be kicking in late, after your jQuery code invokes the function. – hazardous Commented Jun 8, 2016 at 8:42

2 Answers 2

Your shareRenderFunc only exists in the local scope of your Share class. You need to define it as global via the window object :

class Share extends React.Component{
   render(){
      return(
        <div>hello</div>
      );
    }
 }

window.shareRenderFunc=function() {
     ReactDOM.render(
         <Share/> , document.getElementById('shareContainer')
     )
);

did u try to change

var shareRenderFunc=function() {
     ReactDOM.render(
      <Share/> , document.getElementById('shareContainer')
     );
}

in to this...

function shareRenderFunc(){
    ReactDOM.render(
        <Share/> , document.getElementById('shareContainer')
    );
}

you only need to call the function wihtout params if you didnt' set one.

shareRenderFunc();

PS: If you want your jQuery load before your reactsjs, then try to write your jQuery script over your reactsjs line

<script src="jquery ...."></script>
/* and here your reactsjs */