title: React "Maximum update depth exceeded."
body: <p>I have a container which is a child container. This child container handles <code>states</code> and it also receives some <code>props</code> from the parent. I have two select statements which <code>onChange</code> sets <code>state</code> in the child container. For some reason, the <code>setState()</code> is causing the container to re render. The weird part is that the <code>render()</code> and also my <code>setState()</code> code is called only once. (I added debugger to check). Please find my Select combobox code below:</p>
  
  <pre><code>                &lt;Select
                      native
                      name="evidenceNode"
                      value={nodeType}
                      onChange={this.handleChange('nodeType')}
                      className={classes.textField}
                  &gt;
                      &lt;option /&gt;
                      {NODE_TYPE.map(function (item, i) {
                          return &lt;option key={i} value={item}&gt;{item}&lt;/option&gt;
                      })}
                  &lt;/Select&gt;
  
                  &lt;Select
                      native
                      name="modelType"
                      value={modelType}
                      onChange={this.handleChange('modelType')}
                      className={classes.textField}
                  &gt;
                      &lt;option /&gt;
                      {MODEL_TYPE.map(function (item, i) {
                          return &lt;option key={i} value={item}&gt;{item}&lt;/option&gt;
                      })}
                  &lt;/Select&gt;
  </code></pre>
  
  <p>Here is my handleChange function:</p>
  
  <pre><code>handleChange = name =&gt; event =&gt; {
      this.setState({
          [name]: event.target.value,
      });
  };
  </code></pre>
  
  <p>I am suspecting that this is a very small fix but I don't know where am I going wrong. </p>
  
  <p>Things I have tried:</p>
  
  <ol>
  <li>Change the way I am calling handle change to a arrow function and it didnt work</li>
  <li>I removed one of the Select statement and tried running again and it worked.</li>
  <li>I tried to remove the <code>handleChange</code> call from one of the Select statement and it worked fine.</li>
  </ol>
  
  <p>Also I should mention: I have a <code>componentWillReceiveProps</code> function (Not sure if it matters)</p>
  
  <pre><code>componentWillReceiveProps(nextProps, nextContext) {
      if(nextProps.selectedNode !== this.state.selectedNode){
          this.setState({
              selectedNode: nextProps.selectedNode
          });
      }
  }
  </code></pre>