title: Add ld+json script tag in client-side React
body: <p>I have currently build a React app. Since it's a SPA, it has a single index.html file. I want to add 2 "ld+json" <code>script</code> tags, i.e for reviews and bookmarks for a certain route. </p>
  
  <p>I've injected the <code>script</code> tag in <code>componentDidMount</code> of that component but the Google Structured Data Testing Tool doesn't read that. </p>
  
  <p>Is it because Google reads directly from index.html and since my <code>script</code> tags are bundled inside main.js, it cannot read it?</p>
  
  <p>Is it possible to do this in client side React? Is server side rendering the only possible way to do it?</p>
  
  <p>-- Detailed Explanation---
  I currently want to implement a system like IMDB has i.e whenever we search for a movie in goole; the IMDB search result will show the rating of the movie in the google pages itself. To do that I've need to put a script in my index.html file</p>
  
  <pre><code>&lt;script type='application/ld+json'&gt;
    {
        "@context": "http://schema.org/",
        "@type": "Review",
        "itemReviewed": {
          "@type": "Thing",
          "name": "Name"
        },
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "3",
          "bestRating": "5"
        },
        "publisher": {
          "@type": "Organization",
          "name": "1234"
        }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Since my app is an SPA, I cannot put this in my main index.html file.</p>
  
  <p>My current approach:
   Suppose "/movies/inception" route renders "MovieDetail" component. So, I'm currently adding the script at the end of this component.</p>
  
  <pre><code>import React from 'react';
  import JsonLd from '../path_to_JSONLD';
  
  class MovieDetail extends React.Component {
   render(){
   let data = {
    "@context": "http://schema.org/",
    "@type": "Review",
    "itemReviewed": {
      "@type": "Thing",
      "name": "Name"
     },
      "reviewRating": {
       "@type": "Rating",
       "ratingValue": "3",
       "bestRating": "5"
      },
     "publisher": {
       "@type": "Organization",
       "name": "1234"
      }
    }
     return(
      &lt;SOME COMPOENTS /&gt;
      &lt;JsonLd data={data} /&gt;
  
   )
  }
  </code></pre>
  
  <p>My JsonLd component</p>
  
  <pre><code>import React from 'react';
  
  const JsonLd = ({ data }) =&gt;
    &lt;script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
    /&gt;;
  
    export default JsonLd;
  </code></pre>
  
  <p>So, when i inspect the component; i can see the dynamically added script tag. But, in the structure testing tool "<a href="https://search.google.com/structured-data/testing-tool" rel="noreferrer">https://search.google.com/structured-data/testing-tool</a>" . It doesnt show the schema after validation. Hence, I asked whether it can be done via client side or SSR is only solution for this where i can give an updated index.html as a response. </p>
  
  <p>I hope this clears the confusion. Thanks!</p>