How make recursive method in React JS

Question

I dont know how to make a recursive method where you pass data using React.

My idea is using tree.js make a recursive method to check if a folder has other folder as children and finally check if exists a file to check if is cheked and if is expanded.

Here is an example of JSON file that I'm getting:

{
   "name": "Nueva Carpeta2",
   "key": "0-625",
   "isLeaf": false,
   "type": "folder",
   "expanded": false,
   "children": [{
           "name": "Nueva Carpeta2",
           "key": "0-629",
           "isLeaf": false,
           "type": "folder",
           "expanded": false,
           "children": [{
               "name": "Nueva Carpeta3",
               "key": "0-623",
               "isLeaf": false,
               "type": "folder",
               "expanded": false,
               "children": [{
                   "name": "distribucion33",
                   "key": "0-99",
                   "isLeaf": true,
                   "type": "layer",
                   "checked": true
               }]
          }]
     }]
}

Here is my code, and I dont know how make recursive next methods: checkItemCheckeds and checkExpandedFolders

loadJSON = (tree) => {
    this.treeData = [];
    this.checkedKeys = [];
    this.expandedKeys = [];
    this.setState({ treeData: this.treeData, checkedKeys: this.checkedKeys, expandedKeys: this.expandedKeys });
    var totalItems = tree.length-1;
    tree.forEach( (item, index) => {
        this.addItem(item);
        if (index === totalItems) {
            this.setState({ treeData: this.treeData, checkedKeys: this.checkedKeys, expandedKeys: this.expandedKeys });
        }
    });
}

addItem = (data) => {
    var dataItem = {
        name: data.name,
        key: data.key,
        isLeaf: data.isLeaf,
        type: data.type
    };

    if (data.checked !== undefined) {
        dataItem.checked = data.checked;
    }

    if (data.expanded !== undefined) {
        dataItem.expanded = data.expanded;
    }

    if (data.children !== undefined && data.children.length > 0) {
        dataItem.children = data.children;
    }

    this.checkItemCheckeds(data);
    this.checkExpandedFolders(data);

    this.treeData.unshift(dataItem);
}

checkItemCheckeds = (data) => {

    if (data.children !== undefined && data.children.length > 0) {

        data.children.forEach( (item) => {
            if (item.checked) {
                this.checkedKeys.unshift(item.key);
            }
        });

    } else {
        if (data.checked) {
            this.checkedKeys.unshift(data.key);
        }
    }
}

checkExpandedFolders = (data) => {
    if (data.expanded) {
        this.expandedKeys.unshift(data.key);
    }
}

EDIT:

I did this method but dont access to children items.

checkItemCheckeds = (data) => {

    if (data.children !== undefined) return this.checkItemCheckeds(data.children);
    else {
        if (data.checked) {
            return this.checkedKeys.unshift(data.key);
        } else {
            return;
        }
    }
 }

Here is full json file: https://pastebin.com/Fa8j6Eqk

SOLVED:

checkItemCheckeds = (data) => {

    if (data.children !== undefined) {
        data.children.forEach( (item) => {
            (item.checked) ? this.checkedKeys.unshift(item.key) : this.checkItemCheckeds(item);
        });
    }
}

Here is full json file: pastebin.com/Fa8j6Eqk

Javier
– Javier

2018-05-22 09:36:15 +00:00
Commented May 22, 2018 at 9:36 — Javier
– Javier, Commented May 22, 2018 at 9:36

sultan · Accepted Answer · 2018-05-22 10:33:00Z

1

Simply recall the component:

import React from "react";

const Leaf = ({ data = [] }) =>
  data.map(({ key, isLeaf, name, children }) => !isLeaf
    ? <ul key={key}>{name}{getChilds(children)}</ul>
    : <li key={key}>{name}</li>
  );


function getChilds(data) {
  return data && <Leaf data={data} />
} 

export default Leaf

Here is a whole demo.

answered May 22, 2018 at 10:33

sultan

4,7292 gold badges28 silver badges36 bronze badges

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

Comments

yurii kosygin · Accepted Answer · 2018-05-22 09:06:53Z

0

example

const testMethod = obj => {
  if (obj.children) return testMethod(obj.children)
  return obj
}

answered May 22, 2018 at 9:06

yurii kosygin

1545 bronze badges

2 Comments

Javier Over a year ago

Thanks! I know how make a recursive method but I dont know why dont access to childrem items

yurii kosygin Over a year ago

@JaviLesPaul because at you children - an array, and it is necessary to touch and pull out from each object of children and to do a recursion

Collectives™ on Stack Overflow

How make recursive method in React JS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related