React-Table not rendering data

Question

I am trying to render some data in a react-table component however the data doesn't load. I have tested out with dummy data of the exact same format and it works fine. However when I make an API call and get data of the same format and push it to the list of data i'm passing to the react-table the table does not render it. Please help me identify the issue. Cheers

Setting up the columns:

    columns: [
      {
        Header: "Employee ID",
        accessor: "EmployeeID"
      },
      {
        Header: "First Name",
        accessor: "FirstName"
      },
      {
        Header: "Last Name",
        accessor: "LastName"
      },
      {
        Header: "Date of Birth",
        accessor: "DateOfBirth",
      },
      {
        Header: "Status",
        accessor: "Status",
      },
      {
        Header: "Gender",
        accessor: "Gender",
      },
      {
        Header: "UpdatedDateUTC",
        accessor: "UpdatedDateUTC",
      }
    ]

What the data looks like:

{"EmployeeID":"63c571b3-bff0-4ce1-94f7-255c235580fa","FirstName":"Clive","LastName":"Thomas","Status":"ACTIVE","DateOfBirth":"/Date(697248000000+0000)/","Gender":"M","UpdatedDateUTC":"/Date(1533706298000+0000)/"}

My API call and how I'm saving the data item to state. (I console logged the value of the data I'm getting and it is in the correct format)

fetch('http://localhost:3100/employees')
      .then((resp) => {
        return resp.json()
      })
      .then((data) => {
        let temp = this.state.posts;
        temp.push(data.Employees[1])
        this.setState({posts: temp})
        console.log(this.state.posts)
      })
      .catch((error) => {
        console.log(error, "catch the hoop")
      })

The state and the 'posts' list storing the posts in state at bottom (with dummy data):

state = {
    title: "Choose an Endpoint",
    activeOrg: "Orginisation",
    isExpanded: false,
    activeLink: 0,
    authLink:'',
    response: '',
    post: '',
    responseToPost: '',
    show: false,
    modalContent:"",
    token:'',
    verifier:'',
    org:'',
    orginisations: [
      { id: 1, name: "ANU"},
      { id: 2, name: "Bar"},
      { id: 3, name: "FANG"},
      { id: 4, name: "Atlassian"}
    ],
    list: [
      { id: 1, name: "Employees" },
      { id: 2, name: "Leave Applications" },
      { id: 3, name: "Pay Items" },
      { id: 4, name: "Payroll Calendars" },
      { id: 5, name: "Pay Runs" },
      { id: 6, name: "Pay Slips" },
      { id: 7, name: "Settings" },
      { id: 8, name: "Superfund Products" },
      { id: 9, name: "Timesheets" }
    ],
    columns: [
      {
        Header: "Employee ID",
        accessor: "EmployeeID"
      },
      {
        Header: "First Name",
        accessor: "FirstName"
      },
      {
        Header: "Last Name",
        accessor: "LastName"
      },
      {
        Header: "Date of Birth",
        accessor: "DateOfBirth",
      },
      {
        Header: "Status",
        accessor: "Status",
      },
      {
        Header: "Gender",
        accessor: "Gender",
      },
      {
        Header: "UpdatedDateUTC",
        accessor: "UpdatedDateUTC",
      }
    ],
    posts: [
      {"EmployeeID":"63c571b3-bff0-4ce1-94f7-255c235580fa","FirstName":"Clive","LastName":"Thomas","Status":"ACTIVE","DateOfBirth":"/Date(697248000000+0000)/","Gender":"M","UpdatedDateUTC":"/Date(1533706298000+0000)/"}
    ]
  }

Render function:

render() {
    let myClass=""
    let EndpointList = (
      <div>
        {this.state.list.map((i) => {
          i.id === this.state.activeLink ? myClass="endpoint activeLink" : myClass="endpoint"
          return <Endpoint 
            key={i.id}
            name={i.name}
            myClass={myClass}
            clicked={(event) => this.handleClickEndpoint(i, i.id)}/>
        })}
        </div>
    );
    let orgContainer = ""
    this.state.isExpanded ? orgContainer="orgItem expanded" : orgContainer="orgItem notExpanded"
    let OrgList = (
      <div className={orgContainer}>
        {this.state.orginisations.map((o) => {
          return <Orginisation
            key={o.id}
            name={o.name}
            clicked={(event) => this.handleClickOrg(o,o.id)}
          ></Orginisation>
        })}
      </div>
    );
    var activeContent=<ReactTable columns={this.state.columns} data={this.state.posts} noDataText={"Loading..."}></ReactTable>
    // const columns = Object.keys(this.state.data[0]).map((key, id)=>{
    //   console.log(key)
    //   return {
    //     Header: key,
    //     accessor: key,
    //   }
    // })
    return (
      <Router>
        <Route path='/' exact render={
          () => {
            return (
              <div className='authenticateContainer'>

                <a href={this.state.authLink} className='fill-div'>Click to Auntheticate</a> 
              </div>
            )
          }
        }/>
        <Route path='/home' render={
          () => {
            return (
              <div>
                <div className='sideBar'>
                  <div className='logoHolder'>
                    <img className='logo' alt='Logo' src={'./Assets/logo.png'}></img>
                  </div>
                  {EndpointList}
                  {OrgList}
                  <div style={{}} className="org button" onClick={this.expandOrg}>
                    <img className="orgLogo" alt='Logo' src={'./Assets/orgLogo.png'}></img>
                    {this.state.activeOrg}
                  </div>
                </div>
                <div className="container" id={this.state.title}>
                  {/* <button onClick={() => { this.setCredentials() }}>CLICK ME</button> */}
                  <div className="contentContainer">
                    <div className="head">
                      {this.state.title}
                    </div>
                    {activeContent}
                  </div>
                </div>
              </div>
            )
          }
        } />

      </Router> 
    );
  }
}

Instantiating the react-table (also in render function above):

var activeContent=<ReactTable columns={this.state.columns} data={this.state.posts} noDataText={"Loading..."}></ReactTable>

I have also printed the dummy data that is successfully being inserted into the list as well as the API data which is not. As you can see they are clearly identical:

Answer 1

Not sure if this will resolve your issue, but IMO you should refactor this to be

fetch('http://localhost:3100/employees')
      .then((resp) => {
        return resp.json()
      })
      .then((data) => {
        let temp = [...this.state.posts]
        temp.push(data.Employees[1])
        this.setState({
            posts: temp,
            data: data
        })
        console.log(this.state.posts) //this will not have the newest values yet, setState is async
      })
      .catch((error) => {
        console.log(error, "catch the hoop")
      })

It's not good practice to perform manipulations on react state

Answer 2

Why are you pushing Employees[1]? That would be the second record.