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