title: React js change meta tags dynamically
body: <p>I have two flow of my application one is <strong>user side</strong> the other is <strong>admin side</strong>. My user side is responsive so i want meta tag to say <code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;</code> and my admin side is not responsive so i want to enforce browser to open in desktop mode which requires this meta tag to be like this <code>&lt;meta name=&quot;viewport&quot; content=&quot;width=1024&quot; /&gt;</code></p>
  <p>I am using <code>react-document-meta</code> with the following objects</p>
  <pre><code>const metaUser = {
    title: &quot;User meta tags&quot;,
    description: &quot;Basically make the application responsive when on user side&quot;,
    meta: {
      name: { keywords: &quot;viewport&quot; },
      content: &quot;width=device-width, initial-scale=1&quot;,
    },
  };
  const metaAdmin = {
    title: &quot;Admin meta tags&quot;,
    description: &quot;Make the application default in desktop mode&quot;,
    meta: {
      name: { keywords: &quot;viewport&quot; },
      content: &quot;width=1024&quot;,
    },
  };
  </code></pre>
  <p>but it creates new meta on the head tag and those tags doesn't work</p>
  <p><a href="https://i.stack.imgur.com/vjMVN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vjMVN.png" alt="enter image description here" /></a></p>