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.

react-helmet@6.1.0

[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