title: Updating state on props change in React Form
body: <p>I am having trouble with a React form and managing the state properly. I have a time input field in a form (in a modal). The initial value is set as a state variable in <code>getInitialState</code>, and is passed in from a parent component. This in itself works fine.</p>
  <p>The problem comes when I want to update the default start_time value through the parent component. The update itself happens in the parent component through <code>setState start_time: new_time</code>. However in my form, the default <code>start_time</code> value never changes, since it is only defined once in <code>getInitialState</code>.</p>
  <p>I have tried to use <code>componentWillUpdate</code> to force a change in state through <code>setState start_time: next_props.start_time</code>, which did actually work, but it gave me <code>Uncaught RangeError: Maximum call stack size exceeded</code> errors.</p>
  <p>So my question is, what's the correct way of updating state in this case? Am I thinking about this wrong somehow?</p>
  <p>Current Code:</p>
  <pre><code>@ModalBody = React.createClass
    getInitialState: -&gt;
      start_time: @props.start_time.format(&quot;HH:mm&quot;)
  
    #works but takes long and causes:
    #&quot;Uncaught RangeError: Maximum call stack size exceeded&quot;
    componentWillUpdate: (next_props, next_state) -&gt;
      @setState(start_time: next_props.start_time.format(&quot;HH:mm&quot;))
  
    fieldChanged: (fieldName, event) -&gt;
      stateUpdate = {}
      stateUpdate[fieldName] = event.target.value
      @setState(stateUpdate)
  
    render: -&gt;
      React.DOM.div
        className: &quot;modal-body&quot;
        React.DOM.form null,
          React.createElement FormLabelInputField,
            type: &quot;time&quot;
            id: &quot;start_time&quot;
            label_name: &quot;Start Time&quot;
            value: @state.start_time
            onChange: @fieldChanged.bind(null, &quot;start_time&quot;)
  
  @FormLabelInputField = React.createClass
    render: -&gt;
      React.DOM.div
        className: &quot;form-group&quot;
        React.DOM.label
          htmlFor: @props.id
          @props.label_name + &quot;: &quot;
        React.DOM.input
          className: &quot;form-control&quot;
          type: @props.type
          id: @props.id
          value: @props.value
          onChange: @props.onChange
  </code></pre>