I'm trying to work with a checkbox tree ponent like this: , except I'm storing the items that I have selected in Redux. Moreover, the only items that I'm actually storing are the leaf nodes in the tree. So for example, I'd have the full options data which would be used to render the tree:

const fam = {
  cuz2: {
    name: 'cuz2',
    children: {
      cuzKid2: {
        name: 'cuzKid2',
        children: {
        }
      }
    }
  },
  grandpa: {
    name: 'grandpa',
    children: {
      dad: {
        name: 'dad',
        children: {
          me: {
           name: 'me',
           children: {}
          },
          sis: {
           name: 'sis',
           children: {}
          }
        }
      },
      aunt: {
        name: 'aunt',
        children: {
          cuz: {
            name: 'cuz',
            children: {
              name: 'cuzkid',
              children: {}
            }
          }
        }
    }
  }
}

and a separate object that stores the items selected. The following would be the only items that would appear if every checkbox was checked:

const selected = {
 cuz2: true,
 me: true,
 sis: true,
 cuz: true
}

I seem to be struggling with this method for having the UI determine which boxes to have fully, partially, or un-checked based on the selected object. I was wondering if anyone can remend another strategy of acplishing this.

I'm trying to work with a checkbox tree ponent like this: https://www.npmjs./package/react-checkbox-tree, except I'm storing the items that I have selected in Redux. Moreover, the only items that I'm actually storing are the leaf nodes in the tree. So for example, I'd have the full options data which would be used to render the tree:

const fam = {
  cuz2: {
    name: 'cuz2',
    children: {
      cuzKid2: {
        name: 'cuzKid2',
        children: {
        }
      }
    }
  },
  grandpa: {
    name: 'grandpa',
    children: {
      dad: {
        name: 'dad',
        children: {
          me: {
           name: 'me',
           children: {}
          },
          sis: {
           name: 'sis',
           children: {}
          }
        }
      },
      aunt: {
        name: 'aunt',
        children: {
          cuz: {
            name: 'cuz',
            children: {
              name: 'cuzkid',
              children: {}
            }
          }
        }
    }
  }
}

and a separate object that stores the items selected. The following would be the only items that would appear if every checkbox was checked:

const selected = {
 cuz2: true,
 me: true,
 sis: true,
 cuz: true
}

I seem to be struggling with this method for having the UI determine which boxes to have fully, partially, or un-checked based on the selected object. I was wondering if anyone can remend another strategy of acplishing this.

• javascript
• reactjs

• Try using react-checkbox-tree npmjs./package/react-checkbox-tree – Saniya syed qureshi Commented Feb 25, 2019 at 7:09
• do anyone have similar solution for react native? – Khurshid Ansari Commented Feb 2, 2020 at 5:54

2 Answers 2

So I have used react-checkbox-tree but I have customised a bit the icons in order to use another icons library.

Check my example on sandbox:

The library provides a basic example of how to render a tree with selected and/or expanded nodes.

All you need to do is:

1. set up the nodes with a unique 'value'
2. Choose which items should be selected (it may es from Redux)
3. pass nodes & checked list to the CheckBox constructor
4. also be sure that when user select/unselect, you update the UI properly using the state

Your code should look similar to this:

import React from 'react';
import CheckboxTree from 'react-checkbox-tree';

const nodes = [{
  value: '/cuz2',
  label: 'cuz2',
  children: [],
},
  // other nodes
];

class BasicExample extends React.Component {
  state = {
    checked: [
      '/cuz2'
    ],
    expanded: [
      '/cuz2',
    ],
  };

  constructor(props) {
    super(props);

    this.onCheck = this.onCheck.bind(this);
    this.onExpand = this.onExpand.bind(this);
  }

  onCheck(checked) {
    this.setState({
      checked
    });
  }

  onExpand(expanded) {
    this.setState({
      expanded
    });
  }

  render() {
    const {
      checked,
      expanded
    } = this.state;

    return (<
      CheckboxTree checked={
        checked
      }
      expanded={
        expanded
      }
      nodes={
        nodes
      }
      onCheck={
        this.onCheck
      }
      onExpand={
        this.onExpand
      }
    />
    );
  }
}

export default BasicExample;