title: Updating state in react using componentDidUpdate
body: <p>I cannot get the state to update in my code</p>
  
  <p>I am having an issue wiith my componentDidUpdate() which does not update the state of assignments after making an API call
  when updating assignments. When I update the expiration date of a particular assignment in my list, it makes an API call to the server and returns 
  true if the response succeeds. The only way to see the update change in the state is to refresh the page. componentDidUpdate()
  is stuck in an infinite loop, can anyone identify the underlining cause for this?</p>
  
  <p>Thanks for any help</p>
  
  <pre><code>import * as React from 'react';
  import './BundleAssignments.less';
  import { IBundles, featureAccessApi, IAssignmentsByFirm, IBundleAssignment } from '@afi/tfs';
  import { Loader } from '@afi/tfs';
  
  export interface IOwnProps {}
  
  export interface IOwnState {
      loadingBundles: boolean,
      loadingAssignments?: boolean,
      loadingUpdate?: boolean,
      bundles: IBundles[],
      assignments: IAssignmentsByFirm[],
      expirationDate: string,
      bundleId?: number | undefined
  }
  
  
  export class BundleAssignments extends React.Component&lt;IOwnProps, IOwnState&gt; {
      constructor(props: IOwnProps) {
          super(props);
          this.state = {
              loadingBundles: true,
              bundles: [],
              assignments: [],
              expirationDate: "",
              bundleId: undefined
          };
      }
  
      public componentDidMount() {
          this.loadBundles();
      }
  
      public componentDidUpdate(prevProps: IOwnProps, prevState: IOwnState)
      {
          if (prevState.assignments !== this.state.assignments &amp;&amp; this.state.bundleId !== undefined){
  
              this.loadBundleAssignments(this.state.bundleId);
          }
      }
  
      public render() {
          return (
              &lt;div className="bundle-assignments"&gt;
                  &lt;h1&gt;Bundle assignments&lt;/h1&gt;
                  {
                      this.state.loadingBundles ? &lt;Loader /&gt; :
                      &lt;&gt;
                          &lt;select onChange={e =&gt; this.onChangeSelectedBundle(e)}&gt;
                              &lt;option value=""&gt;-- Select a Bundle --&lt;/option&gt;
                              {
                                  this.state.bundles.map(b =&gt; 
                                      &lt;option key={b.id} value={b.id}&gt;{b.name}&lt;/option&gt;
                                  )
                              }
                          &lt;/select&gt;
  
                          {
                              this.state.assignments != null &amp;&amp; this.state.assignments.length &gt; 0 ?
                                  (this.state.loadingAssignments || this.state.loadingUpdate) ? &lt;Loader /&gt; :
                                  &lt;&gt;
                                      &lt;h1&gt;Assignments&lt;/h1&gt;
                                      &lt;div className="download"&gt;
                                          &lt;a href={"https://localhost:44301/api/v2/admin/featureBundle/download/" + this.state.bundleId}&gt;Download Excel&lt;/a&gt;
                                      &lt;/div&gt;
                                      &lt;table className="assignmentsTable"&gt;
                                          {
                                              this.state.assignments.map(a =&gt; 
                                                  &lt;tr key={a.firmRef}&gt;
                                                      &lt;th&gt;
                                                          &lt;span&gt;{a.firmName}&lt;/span&gt;&lt;br /&gt;
                                                          &lt;a href={"admin/teams/firm/" + a.firmRef}&gt;View teams&lt;/a&gt;
                                                      &lt;/th&gt;
                                                      &lt;td&gt;
                                                      {
                                                          &lt;ul id="entites"&gt;
                                                              {
                                                                  a.entities.map(e =&gt;
                                                                      &lt;li key={e.entityRef}&gt;
                                                                          &lt;span&gt;{e.entityName}&lt;/span&gt;
                                                                      &lt;/li&gt;
                                                                  )
                                                              }
                                                          &lt;/ul&gt;
                                                      }
                                                      &lt;/td&gt;
                                                      &lt;td&gt;
                                                      {
                                                          a.entities.map(e =&gt;
                                                              &lt;form key={e.entityRef} onSubmit={(event) =&gt; this.handleSubmit(event, e.bundleAssignment.entityRef, e.bundleAssignment.bundleId, e.bundleAssignment.entityTypeId)}&gt;
                                                                  &lt;input type="datetime-local" name="expirationDate" defaultValue={e.bundleAssignment.expirationDate}  onChange={this.handleInputChange} /&gt;
                                                                  &lt;input type="submit" value="Update" /&gt;
                                                              &lt;/form&gt;         
                                                          )
                                                      }
                                                      &lt;/td&gt;
                                                  &lt;/tr&gt;
                                              )
                                          }
                                      &lt;/table&gt;
                                  &lt;/&gt;
                              : null
                          }
                      &lt;/&gt;
                  }
              &lt;/div&gt;
          )
      }
  
      private loadBundles = () =&gt; {
          featureAccessApi.bundles()
              .then(response =&gt; this.loadBundlesSuccess(response.bundles));
      }
  
      private loadBundlesSuccess = (bundles: IBundles[]) =&gt; {
          this.setState({ ...this.state,
              ...{ 
                  loadingBundles: false, 
                  bundles: bundles
              }
          }) 
      }
  
      private onChangeSelectedBundle = (e: React.ChangeEvent&lt;HTMLSelectElement&gt;) =&gt; {
          const bundleId = Number(e.target.value);
          this.setState({ ...this.state, ...{ loadingAssignments: true, bundleId: bundleId } })
          this.loadBundleAssignments(bundleId);
      }
  
      private handleSubmit = (e: React.FormEvent, entityRef: number, bundleId: number, entityTypeId: number) =&gt; {
          e.preventDefault();
          this.setState({ ...this.state, ...{ loadingUpdate: true }}) 
          this.updateBundleAssignment(entityRef, bundleId, entityTypeId);
      }
  
      private handleInputChange = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
          const target = e.target;
          const value = target.value;
          const name = target.name;
  
          this.setState({ ...this.state, 
              ...{ 
                  [name]: value
              } 
          }) 
      }
  
      private updateBundleAssignment = (entityRef: number, bundleId: number, entityTypeId: number) =&gt; {
          const request: IBundleAssignment = {
              entityRef: entityRef,
              bundleId: bundleId,
              entityTypeId: entityTypeId,
              expirationDate: this.state.expirationDate
          };
  
          featureAccessApi.updateBundleAssignment(request)
              .then(response =&gt; this.bundleAssignmentUpdateSuccess());
      }
  
      private bundleAssignmentUpdateSuccess = () =&gt;
          this.setState({ ...this.state, ...{ loadingUpdate: false }}) 
  
  
      private loadBundleAssignments = (bundleId: number) =&gt; {
          featureAccessApi.bundleAssignments(bundleId)
              .then(response =&gt; this.loadBundleAssignmentsSuccess(response.assignmentsByFirms));
      }
  
      private loadBundleAssignmentsSuccess = (bundleAssignments: IAssignmentsByFirm[]) =&gt; {
          this.setState({ ...this.state,
              ...{ 
                  loadingAssignments: false, 
                  assignments: bundleAssignments
              }
          }) 
      }
  }
  </code></pre>