Implementing Facebook comment plugin in ReactJS app

Question

I am trying to download the facebook comment plugin in a ReactJS application that currently uses React Router.

If I put the facebook initialization code inside my component_idMount () method, it will load for the first time. But, going to another page and then returning to it again, it will not load the plugin.

Is there anything I need to do so that it appears all the time?

I think I need to remove init again and reinitialize facebook. But this is not so.

Any suggestions? Below is my component code

`` ``

import React, { Component } from 'react'; import SlidingPanels from '../components/SlidingPanels'; export class Feedback extends Component { constructor() { super(); } componentDidMount() { $(window).scrollTo(0, '0.5s'); window.fbAsyncInit = function() { FB.init({ appId : '115517331888071', cookie : true, // enable cookies to allow the server to access the session xfbml : true, // parse social plugins on this page version : 'v2.5' // use version 2.1 }); }.bind(this); // Load the SDK asynchronously (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 = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); } render() { return ( <div> <div className="fb-comments" data-href="https://www.facebook.com/cna.net.au/" data-numposts="10"></div> </div> ); } } 

``

Thanks, John.

Answer 1

You only need to initialize the JavaScript SDK once, and since componentDidMount is called only when this is normal. Try putting FB.XFBML.parse() in componentDidUpdate :

 componentDidUpdate() { FB.XFBML.parse(); } 

I am not sure if this is the best solution, but it should work.