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.</p> <p>In <strong>App.js'</strong> render() method:</p> <pre><code><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></code></pre> <p>In <strong>Category.js'</strong> render() method:</p> <pre><code><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></code></pre> <p>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 <code>onChangeClientState</code> function is the last thing logged in the console. I would expect the Category's <code>onChangeClientState</code> to fire last.</p> <p>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.</p> <p>I think I'm misunderstanding the flow of data within Helmet..?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Cosmin-Hodor"><img src="https://avatars.githubusercontent.com/u/120195957?v=4" />Cosmin-Hodor</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>thx I found the fix</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/elderapo"><img src="https://avatars.githubusercontent.com/u/10766808?v=4" />elderapo</a> commented <strong> 9 months ago</strong> </div> <div class="markdown-body"> <blockquote> <p>thx I found the fix</p> </blockquote> <p>Mind sharing what was the fix? :)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Cosmin-Hodor"><img src="https://avatars.githubusercontent.com/u/120195957?v=4" />Cosmin-Hodor</a> commented <strong> 9 months ago</strong> </div> <div class="markdown-body"> <blockquote> <blockquote> <p>thx I found the fix</p> </blockquote> <p>Mind sharing what was the fix? :)</p> </blockquote> <p>Now reading back on my reply, no idea why I even replied with that. I'll look into it again and see what I have done back then as quite a lot of things have happened since back then and my memory lacks.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

nfl / react-helmet

Parent component <title> taking priority #316

I have an app that loads data asynchronously and uses Helmet.