React-Table-6: Table is Returning Blank

Question

Let me preface this with the fact that I am very new.

I am building a MERN application.

I am currently working on getting a react-table to work, however it is coming up blank.

Controller:

Controller Screenshot

Route:

Route screenshot

API:

API Screenshot

I confirmed that the API worked via POSTMAN: POSTMAN Screenshot confirming API call works

Table Code:

import React, { Component } from 'react'
import ReactTable from 'react-table-6'
import api from '../api'

import styled from 'styled-components'

import 'react-table-6/react-table.css'

const Wrapper = styled.div`
    padding: 0 40px 40px 40px;
`




class Churches extends Component {

    constructor(props) {
        super(props)
        this.state = {
            churches: [],
            columns: [],
            isLoading: false,
        }
    }

    componentDidMount = async () => {
        this.setState({ isLoading: true })

        await api.getChurches().then(churches => {
            this.setState({
                churches: churches.data.data,
                isLoading: false,
            })
        })
    }

    render() {
        const { churches, isLoading } = this.state

        const columns = [
         
            {
                Header: 'Church Name',
                accessor: 'church_name',
            },
            {
                Header: 'Church Address Line 1',
                accessor: 'church_address_line1',
            },

            {   
                Header: 'Church Address Line 2',
                accessor: 'church_address_line2', 
            },
            {
                Header: 'Church City',
                accessor: 'church_city',
                filterable: true,
            },
            {
                Header: 'Church State',
                accessor: 'church_state',
                filterable: true,
            },
            {
                Header: 'Church Zip Code',
                accessor: 'church_zipcode',
                filterable: true,
            },
            {
                Header: 'Church Phone',
                accessor: 'church_phone',
            },

            {
                Header: 'Church Website',
                accessor: 'church_website',
            },
        ]

        let showTable = true
          //  if (!churches.length) {
          //showTable = false
       // }

        return (
            <Wrapper>
                {showTable && (
                    <ReactTable
                        data={churches}
                        columns={columns}
                        loading={isLoading}
                        defaultPageSize={10}
                        showPageSizeOptions={true}
                        minRows={0}
                    />
             )}
            </Wrapper>
        )
    }
}
export default Churches

Result:

Screenshot of blank table

What am I doing wrong here? The component is rendering, and I'm not getting any visible error codes, but the data just isn't coming through. It appears to me that everything is set up correctly...but I'm not sure.

Answer 1

I solved it! I had an extra .data which caused the issue.

From

await api.getChurches().then(churches => {
            this.setState({
                churches: churches.data.data,
                isLoading: false,
            })

To:

await api.getChurches().then(churches => {
            this.setState({
                churches: churches.data,
                isLoading: false,
            })

What I don't know is why that worked. I'm still learning the ins-and-outs. If there's anyone on this board who knows, I'd love to pointed into the right direction.

Eventually, I want to migrate this to v7. I just found the tutorial for v6 a little easier to follow - at least from a construction point of view.