0

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.

hilltoploser
  • 1
  • 1
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Aug 22 '23 at 09:30
  • @hilltoploser while consoling the `churches` state, do you get the data as array of objects or objects? – Lokkesh Aug 22 '23 at 10:47
  • It's coming up empty. I think something is up with how I set up the component where it's not actually communicating with the API at all - but I'm not quite sure where the break is. – hilltoploser Aug 22 '23 at 14:16

1 Answers1

0

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.

hilltoploser
  • 1
  • 1