How to build React checkbox tree

Question

I'm trying to work with a checkbox tree component like this: https://www.npmjs.com/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 recommend another strategy of accomplishing this.

Try using react-checkbox-tree npmjs.com/package/react-checkbox-tree — Saniya syed qureshi
– Saniya syed qureshi, Commented Feb 25, 2019 at 7:09

BurebistaRuler · Accepted Answer · 2019-05-31 07:38:32Z

3

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:

answered May 31, 2019 at 7:38

BurebistaRuler

6,55911 gold badges54 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

r.pedrosa · Accepted Answer · 2019-03-29 16:59:19Z

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

All you need to do is:

set up the nodes with a unique 'value'
Choose which items should be selected (it may comes from Redux)
pass nodes & checked list to the CheckBox constructor
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;

Collectives™ on Stack Overflow

How to build React checkbox tree

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related