0

I want to generate dynamic meta tags in my React app. I'm using Helmet and have a problem because it is empty after calling Helmet.renderStatic(). My index.js file:

const store = createStore(rootReducer);

ReactDOM.render(<Provider store={store}><App /></Provider>,
  document.getElementById('root') as HTMLElement
);

const helmet = Helmet.renderStatic();
console.log('meta', helmet.meta.toString());

registerServiceWorker();

and my component looks like that:

  public render() {
    const { article } = this.state;
    return (
      <div className="article-published">
          <Helmet>
            <meta charSet="utf-8" />
             <meta property="og:title" content={article.title} />
          </Helmet>

The problem is that I'm calling API to get article, so when I get a helmet in my index.js article is not there yet, so my helmet.meta has no content.

How can I make it wait for the article to be received from API to use it in the title?

JAY PATEL
  • 559
  • 4
  • 17
aleksandra leszczyszyn
  • 1
  • You can just use `{ article.title && {article.title} }` and `react-helmet` will update your page's title automatically. – vedsmith92 Nov 08 '19 at 07:17
  • @vedsmith92 after writing `{ article.title && {article.title} }` in my component I always get the title empty when printing, like this: ``. But if I put normal string like this: `Qwerty` it works. So it seems like it's not being updated... – aleksandra leszczyszyn Nov 09 '19 at 13:11

0 Answers0