Can't Render Data with API Call

I've been stuck on this for quite some time now, I can't use a get request and have to use post as that is the only way I am able to get field values back. And no matter what I do, I can't get ANY data to render, as of right now, all i see is the loading... telling me that the data is null. yet I don't know how to change this. Any help would be appreciated.

this is using Fetch to call the QuickBase RESTful API to get multiple field values to just use as data points on line charts. I know this shouldn't be this hard, yet nothing I do can render any data. Using React as well.

import React, { Component } from 'react'

let headers = {
  'QB-Realm-Hostname': 'XXXXXXXXXXX.quickbase.com',
  'User-Agent': 'FileService_Integration_V2.1',
  'Authorization': 'QB-USER-TOKEN XXXXXX_XXXXX_XXXXXXXXXXXXXXXX',
  'Content-Type': 'application/json'
};

class JobsTableApi extends Component {
  state = {
    data: null,
  }

  componentDidMount() {
    this.fetchData();
  }    

  fetchData = () => {    
     let body = {"from":"bpz99ram7","select":[3,6,80,81,82,83,86,84,88,89,90,91,92,93,94,95,96,97,98,99,101,103,104,105,106,107,109,111,113,115,120,123,224,225,226,227,228,229,230,231,477,479,480,481],"sortBy":[{"fieldId":6,"order":"ASC"}],"groupBy":[{"fieldId":40,"grouping":"equal-values"}],"options":{"skip":0,"top":0,"compareWithAppLocalTime":false}}

    fetch('https://api.quickbase.com/v1/records/query', {
      method: 'POST',
      headers: headers,
      body: JSON.stringify(body)
    }).then(res => res.json())
      .then( res => {
          this.setState({
            data: [],
          })
        });
      }

  render() {
    const { data } = this.state;

      if (data === null) return 'Loading...';

    return (
        <div>
          <h3>
            {data}
          </h3>
        </div>
    )
  }
}

export default JobsTableApi;

some users have said to map through, but the problem is I don't know how with my current code. some say to use data.value yet it's an array. i've tried data[3], since there is no 'job name' field, or 'amount' field, it's all split up by number as shown above in my select body.

Thanks,

Solution

I guess the root cause is coming from using same names in the React's fetch and as a key in the QB response.

You can try to reach data by map via data["data"][item][6].value (6 is a field ID) I have created and tested the following and it works properly.

<div id="mydiv"></div>

<script type="text/babel">

  let headers = {
    'QB-Realm-Hostname': 'XXXXXXXXXX.quickbase.com',
    'User-Agent': 'FileService_Integration_V2.1',
    'Authorization': 'QB-USER-TOKEN XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'Content-Type': 'application/json'
  };
  
  class JobsTableApi extends React.Component {
  
    constructor(props) {
      super(props);
   
      this.state = {
        data: null,
      };
    }
  
    componentDidMount() {
      this.fetchData();
    }    
  
    fetchData = () => {    
       let body = {"from":"XXXXXXXXXXX","select":[3,6,7],"sortBy":[{"fieldId":6,"order":"ASC"}],"groupBy":[{"fieldId":6,"grouping":"equal-values"}],"options":{"skip":0,"top":0,"compareWithAppLocalTime":false}}
  
      fetch('https://api.quickbase.com/v1/records/query', {
        method: 'POST',
        headers: headers,
        body: JSON.stringify(body)
      }).then(response  => response .json())
        .then(data => this.setState({ data }));

    }
  
    render() {
      const { data } = this.state;
  
      if (data === null) return 'Loading...';
      
      return (
        <ul>
          {Object.keys(data["data"]).map(item =>
              <li key={item}>
                  <a> {data["data"][item][6].value} </a>
              </li>
          )}
        </ul>
      )
    }
  }


  ReactDOM.render(<JobsTableApi />, document.getElementById('mydiv'))
</script>