0

i am having a problem with a facebook chat component, i am initing it within componentDidMount and it will load the component if you do a hard refresh on /contact but wont render the chat component if we browse to /home or /about and then back to the contact page.

code for component : 

componentDidMount() {
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'my-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };

  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
}

render() {
  return (
    <div
    className='fb-page'
    data-href='https://www.facebook.com/mypage/'
    data-tabs='messages'
    data-width='450'
    data-height='280'
    data-small-header='true'>
      <div className='fb-xfbml-parse-ignore'>
        <blockquote />
      </div>
    </div>

and here if what i mean, if you hard refresh the page you get what i want with this: https://ibb.co/gECpXm.

but if i browse to /home and then back i get this: https://ibb.co/bLDwCm

I am using React 16 and React router 4 for the routing.

Thanks in Advance

tygar
  • 244
  • 1
  • 4
  • 15
  • Maybe there is some race condition occurring? I am assuming fbAsyncInit is asynchronous, for example. – Shammoo Nov 27 '17 at 03:15
  • When you changing routes for same component, componentDidMount won't fire. You should do it in componentWillReceiveProps or componentDidUpdate. – godsenal Nov 27 '17 at 03:34
  • The code that embeds the JS SDK is explicitly written in a way that it won’t embed it twice. If you add social plugins to the document after it was initialized, then you need to instruct it to go look for elements to modify again, see duplicate. – CBroe Nov 27 '17 at 08:38

0 Answers0