Using provided example - Uncaught Error: Helmet expects a string as a child of <title>.

[csi-lk]

Using the first example in the readme.md

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
};

I get:

Uncaught Error: Helmet expects a string as a child of <title>. Did you forget to wrap your children in braces? ( <title>{``}</title> ) Refer to our API for more information.
at HelmetWrapper.warnOnInvalidChildren

Even if I change it to

<title>{'My Title'}</title>

I get the same issue

Any ideas?

---

Edit see workaround below: https://github.com/nfl/react-helmet/issues/274#issuecomment-345241784

[cwelch5]

Our unit tests definitely test this case. My Title should be a string. Hmmm.... What's your version of React?

[AlecRust]

I'm also getting this, though if I use <Helmet title="My Title"> instead it works. Running React 15.5.4.

Some elements work such as meta and link, but this doesn't for e.g. (from README):

<script src="http://include.com/pathtojs.js" type="text/javascript" />

Error: Helmet expects a string as a child of <script>. Did you forget to wrap your children in braces? ( <script>{``}</script> ) Refer to our API for more information.
    at HelmetWrapper.warnOnInvalidChildren

I'm using hyperx instead of JSX.

[atulmy]

I encountered similar problem with following code:

<Helmet>
    <title>Product - { item.name }</title>
</Helmet>

Fixed using string literal

<Helmet>
    <title>{ `Product - ${ item.name }` }</title>
</Helmet>

[joshkurz]

yep just ran into this as well. Above solution is a good workaround.

[bramski]

This is rather annoying when trying to do internationalization. Just allow a node.

[mikedpad]

Would love it if nodes were allowed as well. It just seems a bit silly at the moment. It's not that much more, but the first is much easier to read.

Right now, I have to turn this:

<Helmet>
  <title>Default Title{subtitle && `: ${subtitle}`}</title>
</Helmet>

Into this:

<Helmet>
  <title>{subtitle ? `Default Title: ${subtitle}` : `Default Title`}</title>
</Helmet>

[aforty]

Just like OP I'm getting these warnings even though all my titles are explicitly wrapped as strings. This is more annoying than anything but would like to see this fixed.

[email protected]

[atulmy]

@mikedpad or you can write it, if you prefer, like so:

<Helmet>
  <title>{`Default Title${ subtitle ? ': '+subtitle : '' }`}</title>
</Helmet>

[codler]

I encountered similar problem with following code:

<Helmet>
    <title>Product - { item.name }</title>
</Helmet>

Fixed using string literal

<Helmet>
    <title>{ `Product - ${ item.name }` }</title>
</Helmet>

Thank you! Your suggestion worked perfect!

[sahilbakoru]

Thank you. @codler