search

plotly / dash-table

OBSOLETE: now part of https://github.com/plotly/dash
https://dash.plotly.com
MIT License
420 stars 72 forks source link

Objects are not valid as a React child (found: object with keys {id, full_name}). If you meant to render a collection of children, use an array instead. #717

Closed jhert0 closed 4 years ago

jhert0 commented 4 years ago

Code

app.layout = html.Div(children=[
    html.H1('Dashboard', className='text-center'),
    dash_table.DataTable(
        id='preventions',
        columns=[{"name": col, "id": col} for col in df.columns],
        data=df.to_dict('records')
    )
])
Objects are not valid as a React child (found: object with keys {id, full_name}). If you meant to render a collection of children, use an array instead.
    in div (created by t)
    in t (created by t)
    in td (created by t)
    in t (created by t)
    in tr (created by t)
    in tbody (created by t)
    in table (created by t)
    in div (created by t)
    in div (created by t)
    in div (created by t)
    in div (created by t)
    in div (created by t)
    in t (created by t)
    in t (created by t)
    in t (created by t)
    in Suspense (created by t)
    in t (created by CheckedComponent)
    in CheckedComponent (created by TreeContainer)
    in UnconnectedComponentErrorBoundary (created by Connect(UnconnectedComponentErrorBoundary))
    in Connect(UnconnectedComponentErrorBoundary) (created by TreeContainer)
    in TreeContainer (created by Connect(TreeContainer))
    in Connect(TreeContainer) (created by TreeContainer)
    in div (created by u)
    in u (created by CheckedComponent)
    in CheckedComponent (created by TreeContainer)
    in UnconnectedComponentErrorBoundary (created by Connect(UnconnectedComponentErrorBoundary))
    in Connect(UnconnectedComponentErrorBoundary) (created by TreeContainer)
    in TreeContainer (created by Connect(TreeContainer))
    in Connect(TreeContainer) (created by UnconnectedContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in div (created by GlobalErrorOverlay)
    in div (created by GlobalErrorOverlay)
    in GlobalErrorOverlay (created by DebugMenu)
    in div (created by DebugMenu)
    in DebugMenu (created by UnconnectedGlobalErrorContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in UnconnectedGlobalErrorContainer (created by Connect(UnconnectedGlobalErrorContainer))
    in Connect(UnconnectedGlobalErrorContainer) (created by UnconnectedContainer)
    in UnconnectedContainer (created by Connect(UnconnectedContainer))
    in Connect(UnconnectedContainer) (created by UnconnectedAppContainer)
    in UnconnectedAppContainer (created by Connect(UnconnectedAppContainer))
    in Connect(UnconnectedAppContainer) (created by AppProvider)
    in Provider (created by AppProvider)
    in AppProvider
(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)

invariant@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1583518104.8.6.js:49:15

throwOnInvalidObjectType@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1583518104.8.6.js:11968:14

reconcileChildFibers@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1583518104.8.6.js:12742:31

reconcileChildren@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1583518104.8.6.js:14537:28

updateHostComponent@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1583518104.8.6.js:14998:20

beginWork@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1583518104.8.6.js:15784:14

performUnitOfWork@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1583518104.8.6.js:19447:12

workLoop@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1583518104.8.6.js:19487:24

renderRoot@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1583518104.8.6.js:19570:15

performWorkOnRoot@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1583518104.8.6.js:20477:17

performWork@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1583518104.8.6.js:20389:24

performSyncWork@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1583518104.8.6.js:20363:14

requestWork@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1583518104.8.6.js:20232:5

retryTimedOutBoundary@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1583518104.8.6.js:19924:18

wrapped@http://localhost:8050/_dash-component-suites/dash_renderer/react@16.v1_2_2m1583518104.8.6.js:1353:34
jhert0 commented 4 years ago

I found at the issue, there was a nested json object I didn't know about. After parsing the data and removing it the data table works.