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'
                }
            ]
        };
    }
}()

Jakub Mandra staff 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 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?

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


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

  • ForumUser: 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