How to include meta tags dynamically in react js?

Question

I am using reactjs , i want to share my content in facebook,it is happening but after sharing it is not showing images,title,description of the content. so I used react-helmet to dynamically add meta tags in index.html.

<Helmet>
<meta property="og:type" content="video.other" />
<meta property="og:image"       content="https://www.w3schools.com/css/trolltunga.jpg" />
<meta property="og:title" content="My Title" />
<meta property="og:url" content="https://www.afnity.com/video/155" />
<meta property="og:description" content="some discription of the shared    content" />

</Helmet>

and here is the share button

   <button> <a title="dummy" 
href="http://www.facebook.com/sharer.php? u=https://dummy.com/videos/id=25"     target="_blank">
share</a>
</button>

but it is not working.

Answer 1

This can be achieved using react-document-meta npm module when server side rendering enabled in your react application

const meta = {
      title: 'Samvikshana - New Perspective of Exploration',
      meta: {
        property: {
          'og:title': 'Samvikshana',
          'og:url': 'https://samvikshana.weebly.com/',
          'og:image': imageUri,
          'og:description': 'New Perspective of Exploration',

          'twitter:card': 'summary_large_image',
          'twitter:title': 'Samvikshana',
          'twitter:description': 'New Perspective of Exploration',
          'twitter:image': imageUri
        }
      }
    };

    return (
      <div className='container-fluid'>
        <DocumentMeta {...meta} />
         </div>);
    }

Read this blog for more information - https://samvikshana.weebly.com/blog/dynamic-meta-tags-in-react-components