Table example with object not working


Topic: Table example with object not working

blackflow pro asked 6 years ago

error I am trying to use object in tables with no success. The stringifyed works fine but  when I try to use <table> it crashes with TypeError: Cannot read property 'columns' of undefined
import React, { Fragment } from 'react'
import { Table, TableBody, TableHead } from 'mdbreact'

export default (data) => (
  <Fragment>
    <h1> Kalendarz zajeć</h1>
    <button type="button" className="btn btn-primary btn-sm">Matematyka</button>

      {data && <div>
          <pre>{JSON.stringify(data.columns)}</pre>
          <pre>{JSON.stringify(data.rows)}</pre>
    </div>}
    <Table>
      <TableHead columns={data.columns} />
      <TableBody rows={data.rows} />
    </Table>

      {!data && <h1>loading</h1>}
  </Fragment>

)
-------------------------------------UIstore file---------------
import {observable, action} from "mobx";
import singleton from 'decorators/Singleton'


@singleton
export default new class
{
  @observable data;

    @action.bound
    async getCalendar() {
        this.data = {
            columns: [
                {
                    label: '#',
                    field: 'id'
                },
                {
                    label: 'First',
                    field: 'first'
                },
                {
                    label: 'Last',
                    field: 'last'
                },
                {
                    label: 'Handle',
                    field: 'handle'
                }
            ],
            rows: [
                {
                    'id': 1,
                    'first': 'Mark',
                    'last': 'Otto',
                    'handle': '@mdo'
                },
                {
                    'id': 2,
                    'first': 'Jacob',
                    'last': 'Thornton',
                    'handle': '@fat'
                },
                {
                    'id': 3,
                    'first': 'Larry',
                    'last': 'the Bird',
                    'handle': '@twitter'
                }
            ]
        };
    }
}()

patatagrammar pro answered 6 years ago

Hi! Are you using the right MDB table components?
I think you should import:
import {
MDBTable,
MDBTableBody,
MDBTableHead,
} from 'mdbreact';
  And the table should look like:
<MDBTable responsive>
<MDBTableHead columns={data.columns} />
<MDBTableBody rows={data.rows} />
</MDBTable>
At least these settings work for me in version 4.7.1

blackflow pro commented 6 years ago

I hope so since it's from documentation - without using objects everything works fine

Jakub Mandra staff premium answered 6 years ago

Your code has no errors and works fine within fresh create-react-app... I assume that is not the problem with package, but something is happening with data. We've got error here: 'cannot read prop columns of undefined'. Because we do not read prop 'columns' anywhere else, this points the problem that there is no data object. Are there any other errors?

blackflow pro commented 6 years ago

Iv'e added a full screenshot at the top of my initial post.

Jakub Mandra staff premium commented 6 years ago

Aah, i haven't noticed the link :) But this shows that you lose you data obj somehow inside the View comp. This problem is mind blowing, you have 'data' when you do JSON.stringify, but then it is lost... maybe it is something about that async function within mobx?

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.0
  • Device: pc
  • Browser: chrome
  • OS: win
  • Provided sample code: No
  • Provided link: Yes
Tags