title: React—Change a components state on window.history.popstate
body: <p>I have a React component that pushes song IDs to the url when the state changes. My problem is that when a user clicks 'back' on their browser, I need to change the state of my SongApp component. How do I do this?</p>
  
  <pre><code>class SongApp extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        song: props.songId
      }
  
      this.setSong = this.setSong.bind(this);
    }
  
    setSong(e) {
      var songId = e.target.id;
      this.setState({song: songId})
      window.history.pushState({song: songId}, '', '?s='+songId)
    }
  
    render() {
      var id = this.state.song;
  
      var content = id ? &lt;SongDisplay lyrics={ this.props.songData[id].lyrics } /&gt; : &lt;SongIndex songData={this.props.songData} setSong={this.setSong}/&gt;
      return(
        &lt;div className="song-app"&gt;
          {content}
        &lt;/div&gt;
      )
    }
  }
  
  window.addEventListener('popstate', function(event) {
    console.log('popstate fired!');
    debugger;
    if(event.state.song) {
      // change SongApp state
    }
  });
  </code></pre>