Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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. #835

Open
sharjeel1215 opened this issue Oct 2, 2018 · 3 comments

Comments

@sharjeel1215
Copy link

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
Copy link
Contributor

dahlbyk commented Oct 3, 2018

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

@sharjeel1215
Copy link
Author

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

@dahlbyk
Copy link
Contributor

dahlbyk commented Oct 4, 2018

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants