title: Infinite loop while calling react setState in a second component
body: <p>I am working with 3 components that pass data to one another. On the second
  component I am trying to do this when a flag passFlag is true.</p>
  
  <pre><code>     cancelCourse = () =&gt; {
              this.setState({
                settledAmount:'',
                creditAmount:'',
                productDescription:'',
                reasonCode:'',
                storedCollectedInformation:[]
              });
            }
  
            componentDidUpdate(){
              if(this.props.passFlag === true){
                this.cancelCourse();
              }
            }
  </code></pre>
  
  <p>I kept getting an infinite loop with the error message below.</p>
  
  <p>invariant.js:42 Uncaught Invariant Violation: Maximum update depth exceeded. 
  This can happen when a component repeatedly calls setState inside componentWillUpdate or 
  componentDidUpdate. React limits the number of nested updates to prevent infinite loops.</p>
  
  <p>How can I fix this please?</p>
  
  <p>All I am trying to do is to reset the controls on a form to empty.</p>