'Facebook share with reactjs

I am building a blog with reactjs. I want to implement facebook share for the articles. However when I try to share an article in the facebook post there is no description or picture of the article. I understand the problem is in the meta tags. I use MetaTags npm to set meta tags and they seem to work as my title is changing in the tab title.

<div>
            <head>
                <MetaTags>
                    <title>{this.state.article.title}</title>
                    <meta property="og:type" content="website" />
                    <meta property="og:title" content={this.state.article.title} />
                    <meta property="og:description" content="Футболни статии" />
                    <meta property="og:image" content={this.state.article.mainPhoto} />
                    <meta property="og:image:width" content="400" />
                    <meta property="og:image:height" content="400" />
                </MetaTags>
            </head>
            {body}
            <Footer />
        </div>

Can someone give me an alternative? Or tell me how they do it? Thank you very much!

<div
                                    className="fb-share-button"
                                    data-href={'https://thexcoach.com/article/' + this.state.article.slug}
                                    data-layout="button"
                                    data-size="small"
                                >
                                    <a
                                        style={{ textDecoration: 'none', color: '#3b5998' }}
                                        target="_blank"
                                        href={
                                            'https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fthexcoach.com%2Farticle%2F&amp'
                                        }
                                        className=""
                                    >
                                        <FaFacebookSquare style={{ fontSize: '22px', color: '#3b5998' }} /> Сподели
                                    </a>
                                </div>

This is my code in the component. And this is the code in index.html

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

Solution 1:^[1]

I would recommend you to us react-helmet library instead of react-meta-tags you're using here.

It seems like the react-helmet is the best one to use for dynamic content you have here.

Here is an example of how it can be used :

<Helmet>
 <title>Your title here</title>
 <meta name="description" content="Dynamic meta description with your {this.state.variable}" />
</Helmet>

Solution 2:^[2]

You can use react-share library which has inbuilt FacebookShare, WhatsappShare, LinkedInShare, TwitterShare, PinterestShare, EmailShare etc...

Usage: npm i react-share

import { FacebookShareButton, FacebookIcon } from 'react-share';
const Facebook = ({ url, quotes, hashtag }) => {
return (
<>

  <FacebookShareButton
     url={url}     //eg. https://www.example.com
     quotes={quotes}  //"Your Quotes"
     hashtag={hashtag} // #hashTag
   >
    <FacebookIcon />
  </FacebookShareButton>    

</>

)

}

refer to this website: https://medium.com/camperstribe/react-social-media-integration-with-react-share-and-react-helmet-84d9def6a445

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Delphine Poupon
Solution 2

'Facebook share with reactjs

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]