Keeping updated objects relations in React state

Question

I am trying to figure it out, how should I properly create a JSON model for a React component state. Since now I always used Entity Framework and virtual properties to connect related "tables", so now when I want to do similar thing in React and JSON I have don't really know how to proceed.

This is my simplified model:

{
  "myModel": {
    "Categories": [
      {
        "Id": 1,
        "Name": "Cat1",
        "Active": true
      },
      {
        "Id": 2,
        "Name": "Cat2",
        "Active": false
      }
    ],
    "Components": [
      {
        "Id": 1,
        "Name": "Component1",
        "CategoryId": 1
      },
      {
        "Id": 2,
        "Name": "Component2",
        "CategoryId": 1
      },
      {
        "Id": 3,
        "Name": "Component3",
        "CategoryId": 2
      }
    ]
  }
}

How to effectively join these two "tables"? For example if I want to filter Components, whose Category is Active?

In my second approach I changed model to contain the whole Category object in Component:

..."Components": [
 {
   "Id": 1,
   "Name": "Component1",
   "Category": {
        "Id": 1,
        "Name": "Cat1",
        "Active": true
      }
 },...

This allowed me to use filter(a=>a.Category.Active==true) function very easily, but then the problem is when I make changes to a property of one of the Categories, the change does not reflect to Components.

What is the best approach in this situation? Is is better to update all Component[].Category on each Category change or loop through all Categories to find the correct one each time I need to filter or group Components on CategoryId?

I need to have Categories in separate array, because they are not always all in use by Components.

Simon Thiel · Accepted Answer · 2019-07-29 13:47:47Z

1

You can easily aggregate the data and filter for active Components by using your data structure:

  const activeComponents = myModel.Components.filter(component => {
    let isActive = false;
    const componentCategory = myModel.Categories.filter(
      category => category.Id === component.CategoryId
    );
    if (componentCategory.length && componentCategory[0].Active)
      isActive = true;
    return isActive;
  });

You can also shorten the code in case there is always a Category for each CategoryId:

  const activeComponents = myModel.Components.filter(
    component =>
      myModel.Categories.filter(
        category => category.Id === component.CategoryId
      )[0].Active
  );

edited Jul 29, 2019 at 13:47

answered Jul 29, 2019 at 13:05

Simon Thiel

3,3356 gold badges30 silver badges50 bronze badges

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

1 Comment

gtu Over a year ago

This was my first approach, but because of the amount of the code I thought something may be wrong. :)

Domino987 · Accepted Answer · 2019-07-29 13:44:15Z

1

You should check out the redux docs for that. You should not duplicate data and keep it as flat as possible. So your second approach is not advisable, because it both duplicates and nests the data. The components should be inserted into an object where the keys are the ids. Additionally, you could keep all active components in an string array, which contains all active component ids and and retrieve them by iterating over the active component array and extracting the component with the id from the mapping object.

edited Jul 29, 2019 at 13:44

answered Jul 29, 2019 at 12:47

Domino987

8,8642 gold badges17 silver badges40 bronze badges

1 Comment

gtu Over a year ago

I quickly found out that data duplication is very bad idea. Since it is a "small" application, I do not consider using Redux yet.

Collectives™ on Stack Overflow

Keeping updated objects relations in React state

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related