title: Update React component when state changes, using a reference to itself
body: <p>In a React component, I define how the component handles state change in a callback to <code>setState()</code>.  This seems wrong / against flux convention.  Where is the correct place to define how an element should behave given a new state? </p>
  
  <p>I'm assuming it's in the <code>render()</code> method or the <code>didMount()</code> method. </p>
  
  <p>In this situation, I need to call a JS method on the DOM element: </p>
  
  <pre><code>if (this.state.play) {
    document.querySelector(".VideoPlayer-Video").play();
  } else {
    document.querySelect(".VideoPlayer-Video").pause();
  }
  </code></pre>
  
  <p>I can't do this before the component has rendered. So how &amp; where should this be done?</p>
  
  <p><strong>Example Details:</strong></p>
  
  <p>This is a very simple react component. It has a <code>&lt;video&gt;</code> element, and a button that pauses or plays it.</p>
  
  <p>The state only has one attribute, "play", which is "true" if the video is playing or false if the video is paused.</p>
  
  <p>When the "play" button is clicked, I flip the state, then do a DOM query to get the video element, and call a method on it.  </p>
  
  <p>This seems unconventional in React, since I am telling the component how to respond to a state change inside of a click handler. I would expect to define how the component responds to state change elsewhere, but I'm not sure where.</p>
  
  <p>Where is the conventional place to tell the video element to play or not in response to state change? How can I reference the DOM element there?</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>var React = require('react');
  
  module.exports = React.createClass({
    getInitialState: function(){
      return { 
        play: true
      }
    },
    render: function(){
      return &lt;div className="VideoPlayer"&gt;
        &lt;video className="VideoPlayer-Video" src="/videos/my-video.mov"&gt;&lt;/video&gt;
        &lt;button className="VideoPlayer-PlayButton" onClick={this.handlePlayButtonClick}&gt;
          {this.state.play ? "Pause" : "Play"}
        &lt;/button&gt;
      &lt;/div&gt;
    },
    handlePlayButtonClick: function(){
      this.setState({ 
        play: !this.state.play 
      }), function(){
        var video = document.querySelector(".VideoPlayer-Video");
  
        if (this.state.play) {
          video.play();
        } else {
          video.pause();
        }
      }
    }
  });
  </code></pre>