title: React - pre-populate form
body: <p>I need to prepopulate a form so that users can edit a blog they have previously created.  I'm looking for the best-practices way of doing this in React. I am currently passing the value to a component through props, and then setting a state property to equal a props property, but I have read that this is an anti-pattern.  I understand 'source of truth'.  But what is a better way to do it?  I would rather not use redux-form, for now.  Below is my title component, and below that is how I call it from the parent.  This all works, but is there a better way, in order to avoid setting a state property to a props property?</p>
  
  <pre><code>import React, { Component, PropTypes} from 'react';
  
  export default class DocumentTitle extends Component{
    constructor(props) {
        super(props);
        this.state = {inputVal:this.props.publication.document_title}
        this.handleChange = this.handleChange.bind(this)
    }
  
    handleChange(event) {
      this.setState({inputVal: event.target.value});
    }
  
    componentWillReceiveProps(nextProps){
      this.setState({inputVal: nextProps.publication.document_title})
    }
  
    render (){
      return (
        &lt;div &gt;
          &lt;label&gt;Title&lt;/label&gt;
          &lt;div&gt;
            &lt;input onChange={this.handleChange} id="doc_title" type="text" value={this.state.inputVal}/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )    
    }
  }
  </code></pre>
  
  <p>call from parent:</p>
  
  <pre><code> &lt;DocumentTitle publication={this.props.publication} /&gt;
  </code></pre>