I can't use the object or int from value

[mikdatdogru]

i want use the object or int value from node.
document says: you can use mixed type for value. but I couldn't use the object or int.
am i understand wrong or am i using wrong ?

const nodes = [{
  value: 64, // <== i am getting error for this is integer
  label: 'is bankasi',
  children: [

    {
      value: 'ivusd',
      label: 'USD',
      children: [
        {
          value: { bank: 64, branch: 3552, account: 444}, // <== i am getting error for this is object
          label: 'i444'
        },
        {
          value: { bank: 64, branch: 2441, account: 555}, // <== i am getting error for this is object
          label: 'i555'
        },
        {
          value: { bank: 64, branch: 7373, account: 666}, // <== i am getting error for this is object
          label: 'i666'
        }
      ],
    },

  ],
}];

index.js:2178 Warning: Failed prop type: Invalid prop rawChildren[0] supplied to TreeNode.
in TreeNode (created by CheckboxTree)
in CheckboxTree (at AccountActivities.js:441)
in div (created by Col)
in Col (at AccountActivities.js:438)
in div (created by Row)
in Row (at AccountActivities.js:412)
in div (created by CardBody)
in CardBody (at AccountActivities.js:411)
in div (created by Card)
in Card (at AccountActivities.js:410)
in div (created by Col)
in Col (at AccountActivities.js:409)
in div (created by Row)
in Row (at AccountActivities.js:408)
in div (at AccountActivities.js:407)
in AccountActivities (created by DimensionsHOC)
in div (created by DimensionsHOC)
in DimensionsHOC (created by Connect(DimensionsHOC))
in Connect(DimensionsHOC) (created by Route)
in Route (created by withRouter(Connect(DimensionsHOC)))
in withRouter(Connect(DimensionsHOC)) (created by Route)
in Route (at Full.js:119)
in Switch (at Full.js:116)
in div (created by Container)
in Container (at Full.js:115)
in main (at Full.js:113)
in div (at Full.js:111)
in div (at Full.js:109)
in Full (created by Connect(Full))
in Connect(Full) (created by Route)
in Route (created by withRouter(Connect(Full)))
in withRouter(Connect(Full)) (at App.js:45)
in Route (at App.js:41)
in Switch (at App.js:36)
in div (at App.js:33)
in IntlProvider (at App.js:32)
in div (at App.js:31)
in App (created by Connect(App))
in Connect(App) (created by Route)
in Route (created by withRouter(Connect(App)))
in withRouter(Connect(App)) (at index.js:89)
in Router (created by ConnectedRouter)
in ConnectedRouter (at index.js:88)
in Provider (at index.js:87)
stack_frame_overlay_proxy_console @ index.js:2178
printWarning @ warning.js:33
warning @ warning.js:57
checkPropTypes @ checkPropTypes.js:52
validatePropTypes @ react.development.js:1171
createElementWithValidation @ react.development.js:1268
(anonymous) @ index.js:1575
renderTreeNodes @ index.js:1566
renderChildNodes @ index.js:1609
(anonymous) @ index.js:1570
renderTreeNodes @ index.js:1566
render @ index.js:1649
finishClassComponent @ react-dom.development.js:7873
updateClassComponent @ react-dom.development.js:7850
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
index.js:2178 Warning: Failed prop type: Invalid prop value of type object supplied to TreeNode, expected string.
in TreeNode (created by CheckboxTree)
in CheckboxTree (at AccountActivities.js:441)
in div (created by Col)
in Col (at AccountActivities.js:438)
in div (created by Row)
in Row (at AccountActivities.js:412)
in div (created by CardBody)
in CardBody (at AccountActivities.js:411)
in div (created by Card)
in Card (at AccountActivities.js:410)
in div (created by Col)
in Col (at AccountActivities.js:409)
in div (created by Row)
in Row (at AccountActivities.js:408)
in div (at AccountActivities.js:407)
in AccountActivities (created by DimensionsHOC)
in div (created by DimensionsHOC)
in DimensionsHOC (created by Connect(DimensionsHOC))
in Connect(DimensionsHOC) (created by Route)
in Route (created by withRouter(Connect(DimensionsHOC)))
in withRouter(Connect(DimensionsHOC)) (created by Route)
in Route (at Full.js:119)
in Switch (at Full.js:116)
in div (created by Container)
in Container (at Full.js:115)
in main (at Full.js:113)
in div (at Full.js:111)
in div (at Full.js:109)
in Full (created by Connect(Full))
in Connect(Full) (created by Route)
in Route (created by withRouter(Connect(Full)))
in withRouter(Connect(Full)) (at App.js:45)
in Route (at App.js:41)
in Switch (at App.js:36)
in div (at App.js:33)
in IntlProvider (at App.js:32)
in div (at App.js:31)
in App (created by Connect(App))
in Connect(App) (created by Route)
in Route (created by withRouter(Connect(App)))
in withRouter(Connect(App)) (at index.js:89)
in Router (created by ConnectedRouter)
in ConnectedRouter (at index.js:88)
in Provider (at index.js:87)
stack_frame_overlay_proxy_console @ index.js:2178
printWarning @ warning.js:33
warning @ warning.js:57
checkPropTypes @ checkPropTypes.js:52
validatePropTypes @ react.development.js:1171
createElementWithValidation @ react.development.js:1268
(anonymous) @ index.js:1575
renderTreeNodes @ index.js:1566
renderChildNodes @ index.js:1609
(anonymous) @ index.js:1570
renderTreeNodes @ index.js:1566
renderChildNodes @ index.js:1609
(anonymous) @ index.js:1570
renderTreeNodes @ index.js:1566
render @ index.js:1649
finishClassComponent @ react-dom.development.js:7873
updateClassComponent @ react-dom.development.js:7850
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
2index.js:2178 Warning: Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
in ol (created by CheckboxTree)
in li (created by TreeNode)
in TreeNode (created by CheckboxTree)
in ol (created by CheckboxTree)
in li (created by TreeNode)
in TreeNode (created by CheckboxTree)
in ol (created by CheckboxTree)
in div (created by CheckboxTree)
in CheckboxTree (at AccountActivities.js:441)
in div (created by Col)
in Col (at AccountActivities.js:438)
in div (created by Row)
in Row (at AccountActivities.js:412)
in div (created by CardBody)
in CardBody (at AccountActivities.js:411)
in div (created by Card)
in Card (at AccountActivities.js:410)
in div (created by Col)
in Col (at AccountActivities.js:409)
in div (created by Row)
in Row (at AccountActivities.js:408)
in div (at AccountActivities.js:407)
in AccountActivities (created by DimensionsHOC)
in div (created by DimensionsHOC)
in DimensionsHOC (created by Connect(DimensionsHOC))
in Connect(DimensionsHOC) (created by Route)
in Route (created by withRouter(Connect(DimensionsHOC)))
in withRouter(Connect(DimensionsHOC)) (created by Route)
in Route (at Full.js:119)
in Switch (at Full.js:116)
in div (created by Container)
in Container (at Full.js:115)
in main (at Full.js:113)
in div (at Full.js:111)
in div (at Full.js:109)
in Full (created by Connect(Full))
in Connect(Full) (created by Route)
in Route (created by withRouter(Connect(Full)))
in withRouter(Connect(Full)) (at App.js:45)
in Route (at App.js:41)
in Switch (at App.js:36)
in div (at App.js:33)
in IntlProvider (at App.js:32)
in div (at App.js:31)
in App (created by Connect(App))
in Connect(App) (created by Route)
in Route (created by withRouter(Connect(App)))
in withRouter(Connect(App)) (at index.js:89)
in Router (created by ConnectedRouter)
in ConnectedRouter (at index.js:88)
in Provider (at index.js:87)
stack_frame_overlay_proxy_console @ index.js:2178
printWarning @ warning.js:33
warning @ warning.js:57
warnOnInvalidKey @ react-dom.development.js:7187
reconcileChildrenArray @ react-dom.development.js:7221
reconcileChildFibers @ react-dom.development.js:7651
reconcileChildrenAtExpirationTime @ react-dom.development.js:7756
reconcileChildren @ react-dom.development.js:7747
updateHostComponent @ react-dom.development.js:7998
beginWork @ react-dom.development.js:8229
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
index.js:4876 Uncaught TypeError: value.split is not a function
at TreeNode.renderCheckboxLabel (index.js:4876)
at TreeNode.renderLabel (index.js:4919)
at TreeNode.render (index.js:4951)
at finishClassComponent (react-dom.development.js:7873)
at updateClassComponent (react-dom.development.js:7850)
at beginWork (react-dom.development.js:8225)
at performUnitOfWork (react-dom.development.js:10224)
at workLoop (react-dom.development.js:10288)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
at invokeGuardedCallback (react-dom.development.js:438)
at renderRoot (react-dom.development.js:10366)
at performWorkOnRoot (react-dom.development.js:11014)
at performWork (react-dom.development.js:10967)
at batchedUpdates (react-dom.development.js:11086)
at batchedUpdates (react-dom.development.js:2330)
at dispatchEvent (react-dom.development.js:3421)
renderCheckboxLabel @ index.js:4876
renderLabel @ index.js:4919
render @ index.js:4951
finishClassComponent @ react-dom.development.js:7873
updateClassComponent @ react-dom.development.js:7850
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
index.js:2178 The above error occurred in the component:
in TreeNode (created by CheckboxTree)
in ol (created by CheckboxTree)
in li (created by TreeNode)
in TreeNode (created by CheckboxTree)
in ol (created by CheckboxTree)
in li (created by TreeNode)
in TreeNode (created by CheckboxTree)
in ol (created by CheckboxTree)
in div (created by CheckboxTree)
in CheckboxTree (at AccountActivities.js:441)
in div (created by Col)
in Col (at AccountActivities.js:438)
in div (created by Row)
in Row (at AccountActivities.js:412)
in div (created by CardBody)
in CardBody (at AccountActivities.js:411)
in div (created by Card)
in Card (at AccountActivities.js:410)
in div (created by Col)
in Col (at AccountActivities.js:409)
in div (created by Row)
in Row (at AccountActivities.js:408)
in div (at AccountActivities.js:407)
in AccountActivities (created by DimensionsHOC)
in div (created by DimensionsHOC)
in DimensionsHOC (created by Connect(DimensionsHOC))
in Connect(DimensionsHOC) (created by Route)
in Route (created by withRouter(Connect(DimensionsHOC)))
in withRouter(Connect(DimensionsHOC)) (created by Route)
in Route (at Full.js:119)
in Switch (at Full.js:116)
in div (created by Container)
in Container (at Full.js:115)
in main (at Full.js:113)
in div (at Full.js:111)
in div (at Full.js:109)
in Full (created by Connect(Full))
in Connect(Full) (created by Route)
in Route (created by withRouter(Connect(Full)))
in withRouter(Connect(Full)) (at App.js:45)
in Route (at App.js:41)
in Switch (at App.js:36)
in div (at App.js:33)
in IntlProvider (at App.js:32)
in div (at App.js:31)
in App (created by Connect(App))
in Connect(App) (created by Route)
in Route (created by withRouter(Connect(App)))
in withRouter(Connect(App)) (at index.js:89)
in Router (created by ConnectedRouter)
in ConnectedRouter (at index.js:88)
in Provider (at index.js:87)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
stack_frame_overlay_proxy_console @ index.js:2178
logCapturedError @ react-dom.development.js:9747
captureError @ react-dom.development.js:10540
renderRoot @ react-dom.development.js:10391
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
AccountActivities.js:193 componentWillUnmount
index.js:4876 Uncaught TypeError: value.split is not a function
at TreeNode.renderCheckboxLabel (index.js:4876)
at TreeNode.renderLabel (index.js:4919)
at TreeNode.render (index.js:4951)
at finishClassComponent (react-dom.development.js:7873)
at updateClassComponent (react-dom.development.js:7850)
at beginWork (react-dom.development.js:8225)
at performUnitOfWork (react-dom.development.js:10224)
at workLoop (react-dom.development.js:10288)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
at invokeGuardedCallback (react-dom.development.js:438)
at renderRoot (react-dom.development.js:10366)
at performWorkOnRoot (react-dom.development.js:11014)
at performWork (react-dom.development.js:10967)
at batchedUpdates (react-dom.development.js:11086)
at batchedUpdates (react-dom.development.js:2330)
at dispatchEvent (react-dom.development.js:3421)

[jakezatecky]

The main reason a string or integer is required is because the value is being converted to a string and then utilized in a hash map to keep track of all of the nodes in the tree. The value is being to uniquely identify the tree, and that is less possible with an object.

[jakezatecky]

Just realized that you had an error with integers too, which was not supposed to happen. The comment about objects remains, but I just introduced a fix for all numbers.