Allow components that return strings to be children of title

[ntucker]

Now that react 16 allows strings to be returned from components it would be prudent to allow such things when using react-helmet.

[JamieDixon]

We ran into this exact problem today with react-intl. Ideally we'd like to:

<Helme>
   <title><FormattedMessage {...messages.title}>{identity}</FormattedMessage></title>
</Helmet>

We also get the dreaded Helmet expects a string as a child of <title>. error when we try this. Would be great if this could work.

Happy to be involved in creating a PR for this if it's desired by the creators. Thanks for helmet!

[nmaves]

I just ran into this as well. Not the best solution but this was our work around.

          <FormattedMessage id='reports.budget.blocks.title' defaultMessage='Budget Cap Blocks'>
            {(title) => (
              <Helmet>
                <title>{title}</title>
              </Helmet>
            )}
          </FormattedMessage>

[kinging123]

Any updates on this? Still happening in 2019 and would be really useful.

[JamieDixon]

@kinging123 React hook will be out in a few days. It might be that Helmet isn’t needed?

[ntucker]

@JamieDixon helmet is more of a portal pattern than something that works best with hooks.

[EmmanuelPREVOST]

Hello,

I think I found a solution :

import { FormattedMessage, useIntl } from 'react-intl';

function toto() {
  const intl = useIntl();

  return (
    <FormattedMessage 
      id={an.intl.id.not.found.so.default.message.id.used} 
      defaultMessage={intl.formatMessage({ id: 'an.intl.id' })} 
    />

    <Field
      type="text"
      placeholder={intl.formatMessage({ id: 'an.intl.id' })}
    />
  )
}

It worked for me.