Facebook Comments plugin in React/Node.js app only shows on refresh

Question

I have a container that renders a few component along a FB comment. I am on React and it looks like the facebook comment logic only works on the server side as it render only on a refresh and not click through in the application. How can I get the Facebook Comment widget to show on a non-refersh (server-side rendering)?

export default class MyComponent extends Component {
  constructor() {
    super();
  }

  componentDidMount() {
    // Facebook comment SDK
    const fbSDK = (d, s, id) => {
      let js;
      const fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=xxxxxxxxxx';
      fjs.parentNode.insertBefore(js, fjs);
    };
    fbSDK(document, 'script', 'facebook-jssdk');
  }

  // some more code

  render() {

    // some more code

    return (

      // some more code

      <div className={styles.fbCommentContainer}>
        <div id="fb-root"></div>
        <div className="fb-comments" data-href={'http://www.example.com' + this.props.location.pathname}
                 data-colorscheme="dark" data-width="100%" data-numposts="2" data-order-by="reverse_time"></div>
      </div>
    );
  }
}

Answer 1

You add this code into where ever your component is.

componentDidMount(){
   window.FB.XFBML.parse();
}

It will re-parse the dom after mounting your component. It works for me.