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>