React-Helmet Parent component <title> taking priority

1.2k views Asked by At

I have an app that loads data asynchronously and uses Helmet. I have a component in App.js, and in a child component Category.js.

Whenever category gets enough data that it can update the page attribute, I expect that the child's Helmet component will override the App's title tag.

In App.js' render() method:

<Helmet
 onChangeClientState={(newState) => console.log('Change app:', newState, 'Title: ' + this.props.siteInfo.site.title)}
 title={this.props.siteInfo.site.title}
>
 <meta property="twitter:title" content={this.props.siteInfo.site.title} />
 {urlTag}
 {linkTag}
 <meta property="og:title" content={this.props.siteInfo.site.title} />
 <meta property="og:type" content="website" />
 <meta property="og:description" content={this.props.siteInfo.site.title} />
 {favicons.map(icon => {
  return icon
 })}
</Helmet>

In Category.js' render() method:

<Helmet
 onChangeClientState={(newState) => console.log('Change category:', newState, 'Title: ' + title)}
 title={title}
>
 <meta property="og:title" content={title} />
 <meta property="og:description" content={title} />
 <meta property="twitter:title" content={title} />
</Helmet>

If I reload a category route, I expect the title tag to be the category once it's data comes back from the API. However it is always the site title rendered in App. I can see this because the App's onChangeClientState function is the last thing logged in the console. I would expect the Category's onChangeClientState to fire last.

If I navigate around the site a bit (go to the homepage and back to the category) the result is what I expect. However, on a simple page refresh, the child component doesn't render it's Helmet title.

I think I'm misunderstanding the flow of data within Helmet

0

There are 0 answers