Changing the document title in React?
<p>I'm trying to update the title of the document in a React app. I have very simple needs for this. The title is essentially used to put the <code>Total</code> component on display even when you're on a different tab.</p>

<p>This was my first instinct:</p>

<pre><code>const React = require('react');

export default class Total extends React.Component {
  shouldComponentUpdate(nextProps) {
    //otherstuff
    document.title = this.props.total.toString();
    console.log("Document title: ", document.title);
    return true;
  }
  render() {
    document.title = this.props.total;
    return (
      &lt;div className="text-center"&gt;
        &lt;h1&gt;{this.props.total}&lt;/h1&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p>I thought this would just update the <code>document.title</code> every time this component was rendered, but it doesn't appear to do <em>anything</em>.</p>

<p>Not sure what I'm missing here. Probably something to do with how React runs this function - maybe somewhere that the <code>document</code> variable isn't available?</p>

<p><strong>EDIT:</strong></p>

<p>I'm starting a bounty for this question, as I still haven't found any solution. I've updated my code to a more recent version.</p>

<p>A weird development is that the <code>console.log</code> <em>does</em> print out the title I'm looking for. But for some reason, the actual title in the tab isn't updating. This issue is the same across Chrome, Safari, and Firefox.</p>