child node receives incorrect checked state when stateful

[scags9876]

Great component by the way! Keep up the good work...

Found this little gem: If stateful is set to true, and a child node is specified with a checked state different from the state of the parent, then the child node's checked state will be overwritten by the state of the parent.

i.e. given this data:

[
  {
    "label": "Parent 1",
    "checkbox": true,
    "checked": false
  },
  {
    "label": "Parent 2",
    "checkbox": true,
    "checked": true
  },
  {
    "label": "Parent 3",
    "checkbox": true,
    "checked": false,
    "children": [
      {
        "label": "Child 1",
        "checkbox": true,
        "checked": false
      },
      {
        "label": "Child 2",
        "checkbox": true,
        "checked": true
      },
    ],
  },
 ]

Child 2 will actually appear as unchecked.

I believe this is because of this code:

react-tree-menu/src/TreeNode.jsx:129

    if (this._isStateful()) {
      var state = this.state;
      children = React.Children.map(props.children, function (child) {
        return React.cloneElement(child, {
          key: child.key,
          ref: child.ref,
          checked : state.checked  // <-- this is setting checked to the parent state.checked, not the child node's checked state
        })
      });
    }

[scags9876]

Works correctly when stateful is false, by the way.

[MandarinConLaBarba]

Thanks @scags9876 - appreciate the info!