<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">When the <code class="notranslate">title</code> tag is created in a sub-component inside the <code class="notranslate">Head</code> tag it get's set to nothing after the client side bundle takes over. When disabling the JS in the devtools you can see that when the SSR code is used the <code class="notranslate">title</code> tag is used correctly.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Use the code below, load up the index page and you will see the title change from <code class="notranslate">My title is set here</code> to an empty string when the client side bundle takes over.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// Pages/index.js
import React from 'react';
import Head from &quot;next/head&quot;;
import MetaTags from &quot;./../components/MetaTags&quot;;

export default () =&gt; (
    &lt;Head&gt;
        &lt;MetaTags /&gt;
    &lt;/Head&gt;
);
    
// components/MetaTags.js
import React, { Fragment } from 'react';

export default () =&gt; (
    &lt;Fragment&gt;
        &lt;title&gt;My title is set here&lt;/title&gt;
    &lt;/Fragment&gt;
);"><pre class="notranslate"><code class="notranslate">// Pages/index.js
import React from 'react';
import Head from "next/head";
import MetaTags from "./../components/MetaTags";

export default () =&gt; (
    &lt;Head&gt;
        &lt;MetaTags /&gt;
    &lt;/Head&gt;
);
    
// components/MetaTags.js
import React, { Fragment } from 'react';

export default () =&gt; (
    &lt;Fragment&gt;
        &lt;title&gt;My title is set here&lt;/title&gt;
    &lt;/Fragment&gt;
);
</code></pre></div>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Expect the client side code to behave like the SSR code when nesting a <code class="notranslate">title</code> tag in the <code class="notranslate">Head</code> component.</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto"><strong>Example of loading the page from a new tab</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/17417414/48201646-0fbb4a00-e363-11e8-9cdf-c2136d8d06fe.gif"><img src="https://user-images.githubusercontent.com/17417414/48201646-0fbb4a00-e363-11e8-9cdf-c2136d8d06fe.gif" alt="title tag" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Screenshot of DOM tree (JS turned off via Chrome devtools)</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/17417414/48201720-3e392500-e363-11e8-8242-6a67558762ea.png"><img src="https://user-images.githubusercontent.com/17417414/48201720-3e392500-e363-11e8-8242-6a67558762ea.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Screenshot of DOM tree (JS turned on)</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/17417414/48201741-54df7c00-e363-11e8-95f1-82f37e7b9d1b.png"><img src="https://user-images.githubusercontent.com/17417414/48201741-54df7c00-e363-11e8-95f1-82f37e7b9d1b.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>Version of Next.js: <code class="notranslate">7.0.2</code></li>
</ul>
<h2 dir="auto">Additional information</h2>
<p dir="auto">When putting the <code class="notranslate">title</code> tag directly in the <code class="notranslate">Head</code> component it works as expected</p>
<h1 dir="auto">Bug report</h1>
<p dir="auto">When using <code class="notranslate">React.Fragment</code> or an<code class="notranslate">Array</code> as a child of the <code class="notranslate">next/head</code> component, all the tags that are inside of them are not being rendered/parsed correctly into the DOM.</p>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">I have an use case where I need to create a component that wraps head elements.</p>
<p dir="auto">This component lives in a repository that is <code class="notranslate">agnostic</code> to NextJS, so I cannot encapsulate those head elements with the Head component provided by <code class="notranslate">next/head</code> directly.</p>
<p dir="auto">Currently I'm returning those elements wrapped by a React.Fragment element, so it looks something like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;React.Fragment&gt;
  &lt;title&gt;{props.title}&lt;/title&gt;
  &lt;meta name=&quot;description&quot; content={props.description} /&gt;
&lt;/React.Fragment&gt;"><pre class="notranslate"><code class="notranslate">&lt;React.Fragment&gt;
  &lt;title&gt;{props.title}&lt;/title&gt;
  &lt;meta name="description" content={props.description} /&gt;
&lt;/React.Fragment&gt;
</code></pre></div>
<p dir="auto">And in the repository where I'm using NextJS, I'm using that component like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div&gt;
  &lt;Head&gt; // This comes from next/head
    &lt;ComponentThatRendersHeadTags title=&quot;Title&quot; description=&quot;description&quot; /&gt;
  &lt;/Head&gt;
  ...
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div&gt;
  &lt;Head&gt; // This comes from next/head
    &lt;ComponentThatRendersHeadTags title="Title" description="description" /&gt;
  &lt;/Head&gt;
  ...
&lt;/div&gt;
</code></pre></div>
<p dir="auto">However, when I mount that component and go to the head tag in my DOM, I can see that the title tag is being rendered with empty content (looks something like this: <code class="notranslate">&lt;title&gt;&lt;/title&gt;</code> and the meta tags are being rendered correctly but they don't have the <code class="notranslate">next-head</code> class that should be applied to them (don't know if this can cause problems when using Links or the Router itself).</p>
<p dir="auto">I'm currently doing a workaround to this where I'm sending the next/head component as a prop to the component rendering the tags, so it looks something like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const { WrapperComponent } = props
return (
  &lt;WrapperComponent&gt;
    &lt;title&gt;{props.title}&lt;/title&gt;
    &lt;meta name=&quot;description&quot; content={props.description} /&gt;
  &lt;/WrapperComponent&gt;
)"><pre class="notranslate"><code class="notranslate">const { WrapperComponent } = props
return (
  &lt;WrapperComponent&gt;
    &lt;title&gt;{props.title}&lt;/title&gt;
    &lt;meta name="description" content={props.description} /&gt;
  &lt;/WrapperComponent&gt;
)
</code></pre></div>
<p dir="auto">And this approach is working correctly, filling the title tag with content and applying the <code class="notranslate">next-head</code> class to all of them.</p>
<p dir="auto">P.S.: I actually don't know if this behavior of not accepting React.Fragment in Head is expected <g-emoji class="g-emoji" alias="sweat_smile" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f605.png">😅</g-emoji></p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Even though the workaround is working correctly, it would be cool if the next/head component supports <code class="notranslate">React.Fragment</code> or even an <code class="notranslate">Array</code> as a child.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS</li>
<li>Browser (if applies): Chrome</li>
<li>Version of Next.js:<code class="notranslate">7.0.2</code></li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">Heys guys, I have been using NextJS for over a year now and I really love it ❤️<br>
Keep the hard work <g-emoji class="g-emoji" alias="muscle" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f4aa.png">💪</g-emoji> thanks for everything <g-emoji class="g-emoji" alias="smile" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f604.png">😄</g-emoji></p>