Update Table Contents on API Response

Question

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.

I'm creating a small app that uses React at the frontend and a .NET Core API server-side to supply the data.

So far, the following code works:

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 => response.json())
      .then(data => {
        this.setState({
          lgsr: data,
          loading: false
        });
      });
  }

  static renderLGSRTable(lgsr) {
    return (
      <table className='table'>
        <thead>
          <tr>
            <th>Job Number</th>
            <th>Job Type</th>
            <th>UPRN</th>
            <th>Gas Register Number</th>
            <th>Service Date</th>
          </tr>
        </thead>
        <tbody>
          <tr key={lgsr.jobnumber}>
            <td>{lgsr.jobNumber}</td>
            <td>{lgsr.jobType}</td>
            <td>{lgsr.uprn}</td>
            <td>{lgsr.gasRegisterNumber}</td>
            <td>{lgsr.serviceDate}</td>
          </tr>
        </tbody>
      </table>
    );
  }

  render() {
    let contents = this.state.loading
      ? <p><em>Loading...</em></p>
      : LGSRValidation.renderLGSRTable(this.state.lgsr);

    return (
      <div>
        <div>
          <h1>{this.displayName}</h1>
          <p>This component demonstrates fetching data from the server.</p>
          {contents}
        </div>
      </div>
    );
  }
}

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.

What I'm trying to do is introduce a button that onClick 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.

I'm introducing the button within the parent tags of the component like this:

render() {
  let contents = this.state.loading
    ? <p><em>Loading...</em></p>
    : LGSRValidation.renderLGSRTable(this.state.lgsr);

  return (
    <div>
      <div>
        <h1>{this.displayName}</h1>
        <p>This component demonstrates fetching data from the server.</p>
        {contents}
      </div>


      <button onClick={this.getData}>
        Next
      </button>
    </div>
  );
}

Which seems to render fine. I'm also introducing a getData function like this further up:

getData() {
    fetch('api/FormValidation/LGSR')
        .then(response => response.json())
        .then(data => {
            this.setState({
                lgsr: data,
                loading: false
            });
        });

    this.setState({
       contents : this.state.lgsr
    });
}

I suspect it's at this part where I'm going wrong.

Please can you advise how I can click my new button to call the API, return some data and pass the properties of the lgsr object into the corresponding table columns; replacing the previous data with the new data.

Answer 1

You need to bind your getData() to your constructor so you can use this for your component rather than the current function.

this.getData = this.getData.bind(this);

A quicker way is to use arrow function like the following...

getData = () => {....}

This should hopefully fix your problem and allow you to use this.state