Cannot change meta data dynamically client side

[nfl]

Cannot change meta data dynamically client side

[cwelch5]

When changing the title, this shouldn't have any bearing on whether meta changes or not. I need to do a quick test to double-check.

[AmrARaouf]

Any luck?

[cwelch5]

@AmrARaouf
Thanks for your patience.

The reason this fails is because the shouldComponentUpdate check in Helmet returns false when just passing the meta, which causes the component not to re-render. You would get the same result if you passed an unchanged title value.

I did some debugging and found that in your scenario, when Helmet checks this.props and nextProps and compares them, the value is already changed:

[{"name": "keywords", "content": "bar"}, {"charset": "UTF-8"}]
[{"name": "keywords", "content": "bar"}, {"charset": "UTF-8"}]

And this is a result of manipulating the state directly in your foo function. You should never manipulate state directly, but always create new variables, so instead of

  var newMeta = this.state.meta;
  newMeta[0].content = bar;

try

  var newMeta = [
       {
             ...this.state.meta[0]
       }
  ];
  newMeta[0].content = bar;

With the spread operator we can make a new object with same values and then manipulate that new object to pass to Helmet.