How to model recursively nested data in state

Asked
Active3 hr before
Viewed126 times

8 Answers

statemodelnested
90%

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Stack Overflow Public questions & answers , Stack Overflow help chat

Basically, you would define the schema of your tree:

const schema = {
   group: {
      parentGroupId: {
         type: 'group',
         cardinality: 'one',
         reciprocal: 'childGroupIds'
      },
      childGroupIds: {
         type: 'group',
         cardinality: 'many',
         reciprocal: 'parentGroupId'
      },
      itemIds: {
         type: 'item',
         cardinality: 'many',
         reciprocal: 'groupId'
      }
   },
   item: {
      groupId: {
         type: 'group',
         cardinality: 'one',
         reciprocal: 'itemIds'
      }
   }
};
load more v
88%

(Several authors use the term proper tail recursion, although the concept call uses no stack space, there is no limit on the number of "nested" tail calls function with any number as argument; it will never overflow the stack: As such, a quite useful application of proper tail calls in Lua is for programming state machines.,Recursion is a technique for solving a problem where the final solution depends on several solutions to smaller instances of the same problem. In,What is recursion? If we take this list of equal values and reverse the order of the functions we see called, we can derive the function call stack of

Pretag
 Pretag team - issue, fix, solve, resolve
72%

Now in the above array of objects, you have to update the object with the name='xyz', so there are different ways of solving this problem.,We will opt for option 2 where we are going to use Recursion to solve this problem. Say we know the value of object's key 'name' beforehand where we have to update the children array and we have the array of objects:- ,Here we are iterating over the list and checking whether the current value matches any of the child element's 'name' value and if it does then we update the object or we recursively go inside the array of objects.

[{
      name: 'abc',
      children: [{
         name: 'pqr',
         children: [{
            name: 'xyz',
            children: []
         }]
      }]
   },
   {
      name: 'bcd',
      children: [],
   }
]
load more v
65%

I’m sure you’ve experienced the sudden nightmare when you make an API call and the data that gets returned contains an array in it with more data. Then you open that array and it’s filled with more arrays with more data. And then each one of those data elements is another array with more data!,Once again, we’re back to just regular react components. Notice how I’ve added an invisible div there to call the useState hook we setup earlier?,Then, once the original comment has been displayed to the screen, we call the recursive variable we made to display under it any other comments that have been made to that comment:

Pretag
 Pretag team - issue, fix, solve, resolve
75%

A good example of a time when recursion is necessary is when dealing with a data set which is identically and arbitrarily nested.,Often times, particularly when dealing with complex nested data, React developers need to re-think the way they're structuring their component trees. In certain cases, when the data requires it, component trees can't be rendered in an iterative fashion, instead React developers must rely on recursion to display their data.,I’ve implemented this component in a recursive way in the following CodePen:

Let’s take a look at a factorial function in JavaScript and break down exactly what’s happening.

function factorial(n) {
   // base case
   if (n === 1) {
      return 1;
   }
   // recursive call
   return n * factorial(n - 1);
}
factorial(5); // 120
load more v
40%

As an example, we'll be building a React component that has the data structure of a comments section that displays both parent comments and their children.,This is a function we would place inside a React component and have it render each parent comment that is stored in our data.,To use the function, we need to place the Comment function directly into a React component that we export to either render as a page or be used in another page.

    let count = 5

    while (count > 0) {
       console.log(count--)
    }
load more v
22%

So, in my app I have Lists declared recursively like,,Basically, it's a list of lists and I want to enable my app to set the lists property (as in property of the state) as any of the sublists, using the id ie. using id 2, I would like to set data as the list with title mammals (so that I can set the sublist as the current list while viewing?). The state is implemented via Redux.,We suggest normalizing data like this.

var data = {
      lists: [{
               id: 1,
               title: 'animals',
               lists: [{
                  id: 2,
                  title: 'mammals',
                  lists: [...]
               }, {
                  id: 3,
                  title: 'birds',
                  lists: [...]
               }],
               {
                  id: 4,
                  title: 'books',
                  lists: [..]
               }
load more v
60%

Let's see how to solve these problems.,First, let's pack our data to the following data structure:,The gallery data structure can be parsed by the following grammar:

xxxxxxxxxx
load more v

Other "state-model" queries related to "How to model recursively nested data in state"