title: Are state and props mutable?
body: <p>Let's say I have a react component - a button - that increments a value when I click it.</p>
  
  <p>For example</p>
  
  <pre><code>var Component = React.createClass({
      getInitialState: function() {
          return {count: 0}
      },
  
      increment: function() {
          this.setState({count: this.state.count + 1})
      },
  
      render: function() {
          return (&lt;button onClick={this.increment}&gt;{this.state.count}&lt;/button&gt;);
      }
  })
  
  React.render(&lt;Component /&gt;, document.getElementById('react-container'));
  </code></pre>
  
  <p>The state is mutable!</p>
  
  <p>I can do a similar thing with props</p>
  
  <pre><code>var Component = React.createClass({
      increment: function() {
          this.setProps({count: this.props.count + 1})
      },
  
      render: function() {
          return (&lt;button onClick={this.increment}&gt;{this.props.count}&lt;/button&gt;);
      }
  })
  
  React.render(&lt;Component count={0}/&gt;, document.getElementById('react-container'));
  </code></pre>
  
  <p>The state is mutable!</p>
  
  <p>Some of the resources I have checkouted out say props are immutable, but then go and do something like <code>setProps</code>. The different resources keep contradicting each other. This is making it difficult for me to grasp the difference between state and props.</p>
  
  <p>Are props mutable? If not why can I change them? It seems like changing props is not good practice, is this true? If yes, why does <code>setProps</code> exist?</p>