Я попытался визуализировать таблицу из MapContainer. После того, как я получил данные с сервера, я визуализирую компонент TransactionTable.

Это ошибка из таблицы реакции или я неправильно использую ее для этого потока данных?

Предупреждение: React.createElement: тип недействителен - ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

Проверьте метод рендеринга TransactionTable.

Также,

Неперехваченное инвариантное нарушение: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: 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

Обновлять

Пробовал таким способом импортировать ReactTable, но все еще не работает.

импортировать ReactTable из таблицы реакции