Using an API to create data in a ReactTable-CodePudding

I'm new to React.js and want to use this API here: https://atlas.api.barclays/open-banking/v2.2/branches to create a table with Barclays branches data. My problem is, when I render the app, I can't seem to upload the data into the table, only the column's headers. Any help would be appreciated. Thanks!

import React, { Component } from 'react'
import axios from 'axios'
import ReactTable from "react-table-6"; 
import 'react-table-6/react-table.css';

export default class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      branches: [],
      loading:true
    }
  }
  async getBranchesData(){
    const data = await axios.get('https://atlas.api.barclays/open-banking/v2.2/branches')
    console.log(data.Branch)
    this.setState({loading:false, branches: data.Branch})
  }
  componentDidMount(){
    this.getBranchesData()
  }
  render() {
    const columns = [
      {  
      Header: 'Identification',  
      accessor: 'Identification',
     }
     ,{  
      Header: 'Sequence Number',  
      accessor: 'SequenceNumber' ,
      }
     
     ,{  
     Header: 'Name',  
     accessor: 'Name' ,
     }
     ,{  
     Header: 'Type',  
     accessor: 'Type',
     }
     ,{  
     Header: 'Photo',  
     accessor: 'Photo',
     }
     ,{  
     Header: 'Customer Segment',  
     accessor: 'CustomerSegment',
     }
     ,{  
     Header: 'Service and Facility',  
     accessor: 'ServiceAndFacility',
     }
     ,{  
     Header: 'Accessibility',  
     accessor: 'Accessibility',
     }
     ,{  
     Header: 'Other Accessibility',  
     accessor: 'OtherAccessibility',
     }
     ,{  
     Header: 'Other Service and Facility',  
     accessor: 'OtherServiceAndFacility',
     }
     ,{  
     Header: 'Availability',  
     accessor: 'Availability',
     }
     ,{  
     Header: 'Contact Info',  
     accessor: 'ContactInfo',
     }
     ,{  
     Header: 'Postal Address',  
     accessor: 'PostalAddress',
     }
  ]
    return (
     <ReactTable  
      data={this.state.branches}  
      columns={columns} />
    )
  }
} ```

CodePudding user response：

change the next line:

this.setState({loading:false, branches: data.Branch})

for this:

this.setState({loading:false, branches: data.Brand.Branch})

CodePudding user response：

The problem is in the way you're using the React Table library. It only provides table utilities and not a table component as you're trying to use. You can check this basic usage example in their docs to try to fit your use case.

You can use HTML table elements or any UI component libraries (such as Bootstrap or Material UI) to render your table, but it's up to you.