title: Initializing an input field with props value in react
body: <p>I've got a child component that has a text input field whose value should be initialized with props from parent component (<code>this.props.index</code>).</p>
  
  <p>This should be controlled input, since I want to be able to store the text of the input. </p>
  
  <p>Now, if I set the value to the state's attribute, whenever the component gets re-rendered, it's never updated, since setState is never called:</p>
  
  <pre><code>&lt;input type={"text"} placeholder={"Index"} className={"form-control"}
                         value={this.state.index} onChange={this.updateStudentIndex}/&gt;
  </code></pre>
  
  <p>On the other hand, if I set the value to the prop's attribute, it's fixed and changes cannot be made:</p>
  
  <pre><code>&lt;input type={"text"} placeholder={"Index"} className={"form-control"}
                         value={this.props.index} onChange={this.updateStudentIndex}/&gt;
  </code></pre>
  
  <p>How can I both initialize the state with <code>this.props.index</code>, and still be able to track changes in the input's value <code>this.state.index</code>?</p>
  
  <p>Edit: Initialization should be done in async mode, i.e. when I click a button from the parent component.</p>