Invariant Violation: Objects are not valid as a React child (found: Tue Sep 25 2018 18:02:01 GMT+0500 (Pakistan Standard Time)). If you meant to render a collection of children, use an array instead.

[sharjeel1215]

Griddle version

1.11.1

Expected Behavior

if I pass static json, griddle bind the data but when I try to bind data dynamically.. following error occured. Invariant Violation: Objects are not valid as a React child (found: Tue Sep 25 2018 18:02:01 GMT+0500 (Pakistan Standard Time)). If you meant to render a collection of children, use an array instead.

const columnsAdmin = ['_id','title','gigDate','arrivalTime','setEnd','venueName','groupType','createdAt','venueAddress'];

const columnMetaGigs = [ { "columnName": "_id", "displayName": "Event", "order": 0, "locked": true, "visible": true, "customComponent": eventTitle }, { "columnName": "title", "displayName": "Gig", "order": 1, "locked": false, "visible": true }, { "columnName": "gigDate", "displayName": "Date", "order": 2, "locked": true, "visible": true, "customComponent": showDate }, { "columnName": "arrivalTime", "displayName": "Start", "order": 3, "locked": true, "visible": true, "customComponent": showStart }, { "columnName": "setEnd", "displayName": "End", "order": 4, "locked": true, "visible": true, "customComponent": showEnd }, { "columnName": "venueName", "displayName": "Location", "order": 5, "locked": false, "visible": true, }, { "columnName": "groupType", "displayName": "Group", "order": 6, "locked": false, "visible": true, }, { "columnName": "createdAt", "displayName": "BL", "order": 7, "locked": true, "visible": true, "customComponent": bandLeader }, { "columnName": "venueAddress", "displayName": "musician", "order": 8, "locked": true, "visible": true, "customComponent": showOffers }, ];

const columnsMuso = ['_id','title','gigDate','arrivalTime','setEnd','venueName','groupType'];

const columnMetaGigsMuso = [ { "columnName": "_id", "displayName": "Event", "order": 0, "locked": true, "visible": true, "customComponent": eventTitle }, { "columnName": "title", "displayName": "Gig", "order": 1, "locked": false, "visible": true }, { "columnName": "gigDate", "displayName": "Date", "order": 2, "locked": true, "visible": true, "customComponent": showDate }, { "columnName": "arrivalTime", "displayName": "Start", "order": 3, "locked": true, "visible": true, "customComponent": showStart }, { "columnName": "setEnd", "displayName": "End", "order": 4, "locked": true, "visible": true, "customComponent": showEnd }, { "columnName": "venueName", "displayName": "Location", "order": 5, "locked": false, "visible": true, }, { "columnName": "groupType", "displayName": "Group", "order": 6, "locked": false, "visible": true, } ]; <Griddle data={gigs} plugins={[plugins.LocalPlugin]} columnMetadata={ ((userRole('admin') === true ) || (userRole('manager') === true)) ? columnMetaGigs : columnMetaGigsMuso } resultsPerPage={100} columns={ ((userRole('admin') == true ) || (userRole('manager') != true)) ? columnsAdmin : columnsMuso } showFilter={true} />

Actual Behavior

Steps to reproduce

Pull request with failing test or storybook story with issue

While this step is not necessary, a failing test(s) and/or a storybook story will help us resolve the issue much more easily. Please see the README for more information.

[dahlbyk]

Your specified configuration looks like it's for Griddle 0.x, not 1.x. Please confirm?

[sharjeel1215]

yeah sorry I'm using Griddle 1.x. Can you share the same configurations for 1.x as I used for 0.x?

[dahlbyk]

Something like this?

<Griddle data={gigs}
  plugins={[plugins.LocalPlugin]}
  pageProperties={{ pageSize: 100 }}>
  {
    ((userRole('admin') === true ) || (userRole('manager') === true))
      ?
      <RowDefinition>
        <ColumnDefinition id="_id" title="Event" customComponent={eventTitle} />
        ...
      </RowDefinition>
      :
      <RowDefinition>
        <ColumnDefinition id="_id" title="Event" customComponent={eventTitle} />
         ...
      </RowDefinition>
  }
</Griddle>