Facebook comments plugin only show on reload page reactjs

Question

Im using Facebook Comment Plugin for my react app, but it not show when I use < Link to=' '/> and I have to reload the page once or twice to make it work. here is my code

index.html

  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous"
    src="https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&autoLogAppEvents=1&version=v9.0&appId=3638093886307743"
    nonce="Owrtrtj1"></script>

component js

export class FacebookComment extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const location = window.location.href;
        return (
            <div>
                <div
                    class={"fb-comments"}
                    data-href={location}
                    data-width="100%" data-numposts="1"></div>

            </div>

        )
    }
}

Answer 1

This is my code, it work for me !

export function FacebookComment(props) {
    const { link, title } = props;

    React.useEffect(() => {
        if (window.FB) {
            window.FB.XFBML.parse();
        }
    },[]);

    return (
        <div className="facebookComment">
            <div className="title">{title}</div>

            <div
                className="fb-comments"
                data-href={link}
                data-width="100%"
                data-numposts="5"
            ></div>
        </div>
    );
}