Calling a react component by passing state exception

Question

I tried to render the table from MapContainer After I grabbed the data from server, I will render TransactionTable component.

Is this a bug from 'react-table' or am I using it the wrong way for this data flow?

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of TransactionTable.

Also,

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

MapContainer.tsx

class MapContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            transactions: []
        }
    }

    componentDidMount() {
        let self = this
        axios.get("http://localhost:8080/api/v1/XXXX", {}).then(resp => {
            console.table(resp)
            self.setState({transactions: resp.data})
            self.forceUpdate()
        }).catch((e) => {
            console.log(e)
        })
    }

    render() {
        return (
            <div>
                <GoogleMap
                    defaultZoom={16}
                    defaultCenter={{lat: 25.0389801, lng: 121.5272577}}
                    defaultOptions={{styles: null}}
                >
                    {this.state.transactions && this.state.transactions.map(transaction => (
                        <Item data={transaction}/>
                    ))}

                </GoogleMap>
                {this.state.transactions && <TransactionTable data={this.state.transactions}/>}
            </div>
        )

    }
}

TransactionTable.tsx

import React, {useState, useEffect, Component} from "react";
import { useTable, useSortBy } from 'react-table'
import {ReactTable} from 'react-table'


class TransactionTable extends Component {
    constructor(props) {
        super(props);
        console.log(props)
        this.state = {
            data: props.data
        };
    }
    render() {
        const { data } = this.state;
        console.log("RECEIVED data")
        console.table(data)
        return (
            <div>
                <h1> Table </h1>
                <ReactTable
                    data={data}
                    columns={[
                        {
                            Header: "Name",
                            columns: [
                                {
                                    Header: "First Name (Sorted by Length, A-Z)",
                                    accessor: "transaction_id"
                                },
                                {
                                    Header: "Last Name (Sorted in reverse, A-Z)",
                                    id: "lastName",
                                    accessor: d => d.address
                                }
                            ]
                        },
                        {
                            Header: "Info",
                            columns: [
                                {
                                    Header: "estimate_address",
                                    accessor: "estimate_address"
                                }
                            ]
                        }
                    ]}
                    defaultPageSize={10}
                    className="-striped -highlight"
                />
            </div>
        );
    }
}
export default TransactionTable

Update

Tried this way to import ReactTable but still not working.

import ReactTable from 'react-table'

Answer 1

The correct way to import ReactTable is import ReactTable from 'react-table';