title: ReactJS state vs prop
body: <p>This may be treading that line between answerable and opinionated, but I'm going back and forth as to how to structure a ReactJS component as complexity grows and could use some direction. </p>
  
  <p><strong>Coming from AngularJS, I want to pass my model into the component as a property and have the component modify the model directly. Or should I be splitting the model up into various <code>state</code> properties and compiling it back together when sending back upstream? What is the ReactJS way?</strong> </p>
  
  <p>Take the example of a blog post editor. Trying to modify the model directly ends up looking like:</p>
  
  <pre><code>var PostEditor = React.createClass({
    updateText: function(e) {
      var text = e.target.value;
      this.props.post.text = text;
      this.forceUpdate();
    },
    render: function() {
      return (
        &lt;input value={this.props.post.text} onChange={this.updateText}/&gt;
        &lt;button onClick={this.props.post.save}/&gt;Save&lt;/button&gt;
      );
    }
  });
  </code></pre>
  
  <p>Which seems wrong.</p>
  
  <p>Is it more the React way to make our <code>text</code> model property <code>state</code>, and compile it back into the model before saving like:</p>
  
  <pre><code>var PostEditor = React.createClass({
    getInitialState: function() {
      return {
        text: ""
      };
    },
    componentWillMount: function() {
      this.setState({
        text: this.props.post.text
      });
    },
    updateText: function(e) {
      this.setState({
        text: e.target.value
      });
    },
    savePost: function() {
      this.props.post.text = this.state.text;
      this.props.post.save();
    },
    render: function() {
      return (
        &lt;input value={this.state.text} onChange={this.updateText}/&gt;
        &lt;button onClick={this.savePost}/&gt;Save&lt;/button&gt;
      );
    }
  });
  </code></pre>
  
  <p>This doesn't require a call to <code>this.forceUpdate()</code>, but as the model grows, (a post may have an author, subject, tags, comments, ratings, etc...) the component starts getting really complicated. </p>
  
  <p>Is the first method with <a href="http://facebook.github.io/react/docs/two-way-binding-helpers.html">ReactLink</a> the way to go?</p>