Reaction - preflight form

Question

I need to pre-fill out the form so that users can edit the blog they created earlier. I am looking for a better way to do this in React. Currently, I pass the value to the component through the details, and then set the state property to the property of the property, but I read that it is an anti-pattern. I understand the "source of truth." But what is the best way to do this? At the moment, I would prefer not to use the reduction form. Below is the title, and below I call him the parent. It all works, but is there a better way to avoid setting the state property to the property props?

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 (
      <div >
        <label>Title</label>
        <div>
          <input onChange={this.handleChange} id="doc_title" type="text" value={this.state.inputVal}/>
        </div>
      </div>
    )    
  }
}

call from parent:

 <DocumentTitle publication={this.props.publication} />

Answer 1

, , : .

. OnBlur .

<input 
  onBlur={e => this.props.onTitleChange(e.target.value)}
  id="doc_title" 
  type="text" 
  defaultValue={this.props.publication.document_title} />

.

<DocumentTitle 
  publication={this.state.publication} 
  onTitleChange={this.handleTitleChange} />