title: Update Table Contents on API Response
body: <p>I'm very new to React and although made some progress that I'm happy with, I've hit a snag that I'm stuck with and have been for over a day.</p>
  
  <p>I'm creating a small app that uses React at the frontend and a .NET Core API server-side to supply the data.</p>
  
  <p>So far, the following code works:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  export class LGSRValidation extends Component {
    displayName = LGSRValidation.name
  
    constructor(props) {
      super(props);
      this.state = { lgsr: [], loading: true };
  
      fetch('api/FormValidation/LGSR')
        .then(response =&gt; response.json())
        .then(data =&gt; {
          this.setState({
            lgsr: data,
            loading: false
          });
        });
    }
  
    static renderLGSRTable(lgsr) {
      return (
        &lt;table className='table'&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Job Number&lt;/th&gt;
              &lt;th&gt;Job Type&lt;/th&gt;
              &lt;th&gt;UPRN&lt;/th&gt;
              &lt;th&gt;Gas Register Number&lt;/th&gt;
              &lt;th&gt;Service Date&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr key={lgsr.jobnumber}&gt;
              &lt;td&gt;{lgsr.jobNumber}&lt;/td&gt;
              &lt;td&gt;{lgsr.jobType}&lt;/td&gt;
              &lt;td&gt;{lgsr.uprn}&lt;/td&gt;
              &lt;td&gt;{lgsr.gasRegisterNumber}&lt;/td&gt;
              &lt;td&gt;{lgsr.serviceDate}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      );
    }
  
    render() {
      let contents = this.state.loading
        ? &lt;p&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
        : LGSRValidation.renderLGSRTable(this.state.lgsr);
  
      return (
        &lt;div&gt;
          &lt;div&gt;
            &lt;h1&gt;{this.displayName}&lt;/h1&gt;
            &lt;p&gt;This component demonstrates fetching data from the server.&lt;/p&gt;
            {contents}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>What it quite simply does is call my API to return a single object to the client-side code and render each property within the object into a separate table column.</p>
  
  <p>What I'm trying to do is introduce a button that <code>onClick</code> will call the API again, pull a new object and change the values in the table for the new property values. I'm happy with my server-side code and the creation of the random objects but my client side code is just not working.</p>
  
  <p>I'm introducing the button within the parent  tags of the component like this:</p>
  
  <pre><code>render() {
    let contents = this.state.loading
      ? &lt;p&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
      : LGSRValidation.renderLGSRTable(this.state.lgsr);
  
    return (
      &lt;div&gt;
        &lt;div&gt;
          &lt;h1&gt;{this.displayName}&lt;/h1&gt;
          &lt;p&gt;This component demonstrates fetching data from the server.&lt;/p&gt;
          {contents}
        &lt;/div&gt;
  
  
        &lt;button onClick={this.getData}&gt;
          Next
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Which seems to render fine. I'm also introducing a <code>getData</code> function like this further up:</p>
  
  <pre><code>getData() {
      fetch('api/FormValidation/LGSR')
          .then(response =&gt; response.json())
          .then(data =&gt; {
              this.setState({
                  lgsr: data,
                  loading: false
              });
          });
  
      this.setState({
         contents : this.state.lgsr
      });
  }
  </code></pre>
  
  <p>I suspect it's at this part where I'm going wrong.</p>
  
  <p>Please can you advise how I can click my new button to call the API, return some data and pass the properties of the <code>lgsr</code> object into the corresponding table columns; replacing the previous data with the new data.</p>