How to use meta tags with dynamic value in react js?

I can see few issues regarding the code which you shared.

1. Meta tags come under head, but your react components would be rendered in your body tag.
2. Considering SEO part, google can parse JS now so your tags would be read but bing and if you consider yahoo still cannot still do that( Google also is really not that efficient still, faced too many issues regarding while handling SEO's with single page app)
3. If your reacts components uses Link to navigate to other components which I am assuming it would it case of SPA it would not work, because crawlers try to reach you page directly.

Now,if you have a single page app with a single component you can try react-helmet , but if it involves multiple components and navigations I would suggest you to go for pre-rendering,maybe using phatom-js or pre-render.io(which indirectly uses phantomjs).

If your only concern is meta tags, then you can embed you meta tags directly into your html code and not in the components. This would really help the crawlers to see the meta tags.

But,if you also want crawlers to see your content, pre-rendering is best solution which I can think of now.

If you are serving your React bundle from a server, you can dynamically generate meta tags on the server.

Essentially, in your public/index.html file you want to replace the metadata with an identifiable string:

<!-- in public/index.html -->
<title>$OG_TITLE</title>
<meta name="description"        content="$OG_DESCRIPTION" />
<meta property="og:title"       content="$OG_TITLE" />
<meta property="og:description" content="$OG_DESCRIPTION" />
<meta property="og:image"       content="$OG_IMAGE" />

And then on the server, you want to replace these strings with the dynamically generated information. Here is an example route with Node and Express:

app.get('/about', function(request, response) {
  console.log('About page visited!');
  const filePath = path.resolve(__dirname, './build', 'index.html')
  fs.readFile(filePath, 'utf8', function (err,data) {
    if (err) {
      return console.log(err);
    }
    data = data.replace(/\$OG_TITLE/g, 'About Page');
    data = data.replace(/\$OG_DESCRIPTION/g, "About page description");
    result = data.replace(/\$OG_IMAGE/g, 'https://i.imgur.com/V7irMl8.png');
    response.send(result);
  });
});

Taken from this tutorial here: https://www.kapwing.com/blog/how-to-add-dynamic-meta-tags-server-side-with-create-react-app/

** no need to install express node and all..
** just add react-helmat & must add Helmat-meta tag all routing container. (otherwise its still show home page meta tag) ** react return single element, so you must add into parent element like (div, form)

import { Helmet } from "react-helmet";
import MetaDataJSON from "./MetaDataJSON_File"; 

constructor(){
    this.metaDetails = {}; 
}

UNSAFE_componentWillMount(){
    let curPath = window.location.pathname
    this.metaDetails =  getMetaData(curPath);   
}

export const getMetaData = (pathname) =>{
  const metaObj = MetaDataJSON;      // import meta json and check the route path is in equal to your meta json file        
  let metaPath = Object.keys(metaObj);
  if (metaPath.indexOf(pathname) >= 0) {
    return metaObj[pathname]; 
  }else{
    return metaObj["/"]; 
  }
} 

// you must add in all component (where routing container)
render(){ 
    return(
        <div>
            <Helmet>
                <title>{this.metaDetails.title}</title>
                <meta name="description" content= {this.metaDetails.description}/>
                <meta name="keywords" content= {this.metaDetails.keywords} />
            </Helmet>
        <div>
    )
}

Create React App produces a static bundle with HTML, JS, and CSS. It can’t possibly give you a dynamic <meta> tag because the result HTML is created ahead of time.

While changing document.title with something like React Helmet makes sense, changing <meta> tags doesn’t make sense unless your app is server rendered. Server rendering is not a supported feature of Create React App so if you want to use it, you might want to check out some alternatives such as Next.js.

That said, if you don’t want full server rendering and only need to change <meta> tags, you could do this by hand as described here.

I hope this helps!

There Is a Package Named React-Helmet available it helps to take control over Your Head tags on each route. Helmet takes plain HTML tags and outputs plain HTML tags. It’s dead simple, and React beginner friendly.

<Helmet>
     <title>{context.StoreName}</title>
     <meta name="theme-color" content={`${context.ThemeColor}`}/>
</Helmet>

reference - https://codeburst.io/how-to-control-head-tags-in-react-seo-friendly-8264e1194880