Table example with object not working

Topic: Table example with object not working

blackflow pro asked 5 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'
                }
            ]
        };
    }
}()

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

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 5 years ago

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

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

Add comment

patatagrammar pro answered 5 years ago

0 0 Best answer

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 5 years ago

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

Add comment

Write

Create snippet

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

blackflow

Pro User 40Support score
6Questions 1Answers 0Snippets