I want to create checkbox checked in nested data in react js

user_7156712 0
Viewed 1119

My data is in nested array objects. I want to make checked/unchecked the nodes like a tree view. ie. when any child node is selected then the parent node is checked itself. This is how my nested array looks like.

This is my nested JSON. From this object, I create a tree view from this data:

My tree structure

 const nodes = [
  {
    value: "/app",
    label: "app",
    children: [
      {
        value: "/app/Http",
        label: "Http",
        children: [
          {
            value: "/app/Http/Controllers",
            label: "Controllers",
            children: [
              {
                value: "/app/Http/Controllers/WelcomeController.js",
                label: "WelcomeController.js",
              },
            ],
          },
          {
            value: "/app/Http/routes.js",
            label: "routes.js",
          },
        ],
      },
      {
        value: "/app/Providers",
        label: "Providers",
        children: [
          {
            value: "/app/Http/Providers/EventServiceProvider.js",
            label: "EventServiceProvider.js",
          },
        ],
      },
    ],
  },
  {
    value: "/config",
    label: "config",
    children: [
      {
        value: "/config/app.js",
        label: "app.js",
      },
      {
        value: "/config/database.js",
        label: "database.js",
      },
    ],
  },
  {
    value: "/public",
    label: "public",
    children: [
      {
        value: "/public/assets/",
        label: "assets",
        children: [
          {
            value: "/public/assets/style.css",
            label: "style.css",
          },
        ],
      },
      {
        value: "/public/index.html",
        label: "index.html",
      },
    ],
  },
  {
    value: "/.env",
    label: ".env",
  },
  {
    value: "/.gitignore",
    label: ".gitignore",
  },
  {
    value: "/README.md",
    label: "README.md",
  },
];

I am using this function to make parent checked when child is checked.

checkChange(targetNode: any, event) {
    /// debugger;
    const targetNodeId = targetNode.id;
    this.findIndexNestedforCheckbox(targetNode, targetNodeId);
    let newTableData = [...this.state.tableData];
    this.setState({ tableData: newTableData, isActionFooter: true });
  }
findIndexNestedforCheckbox(data, index) {
   
    if (data.id === index) data.isChecked = "Yes";

    let result;
    const i = (data.children || []).findIndex((child) => {
      child.isChecked = "Yes";

      return (result = this.findIndexNestedforCheckbox(child, index));
    });
    if (result) return [i, ...result];
  }
babeljs reactjs
1 Answers

npm install react-checkbox-tree

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

const nodes = [{
    value: 'mars',
    label: 'Mars',
    children: [
        { value: 'phobos', label: 'Phobos' },
        { value: 'deimos', label: 'Deimos' },
    ],
}];

class Widget extends React.Component {
    state = {
        checked: [],
        expanded: [],
    };

    render() {
        return (
            <CheckboxTree
                nodes={nodes}
                checked={this.state.checked}
                expanded={this.state.expanded}
                onCheck={checked => this.setState({ checked })}
                onExpand={expanded => this.setState({ expanded })}
            />
        );
    }
}
user_161711900
Related