1

I have 2 objects in this.state of the same component:

Object 1 is a set of key: value pairs.
Object 2 is an array of objects. Each inner object contains again pairs of key: value, but one of the pairs should refer to value stored in the first object:

this.state = {
        Object 1: {
          key 1: 1,
          key 2: 2,
          key 3: 3
        },

        Object 2: [
            {
                key 1: "...",
                key 2: value of e.g. Object 1 - key 3
            },
            {
             ...
            }
        ]
    };

Is there a way to refer directly to the first object from the second? The only other way that came on my mind was passing the first object as props to another class, but that would be a bit impractical as this is the top element that would ideally contain both objects.

I don't want to store all values in the same object as both objects are rendered in different elements.

Faire
  • 706
  • 1
  • 9
  • 31
  • Yes you can, but it kind of depends on what the relationship between Object 1 and Object 2 is to determine what is the best way to do it. So we'd need a concrete example to know what is appropriate in this situation. Generally I would either use a key in Object 1 as the value of key 2 inside Object 2. If you use the value of a key in Object 1 instead of the key itself, Object 1 might be obsolete to begin with. – Shilly Apr 10 '19 at 13:22
  • When you start needing to do these sort of things in your app then it's probably a good plan to using a separate library to manage your app state (like e.g. redux). In that case you can pull local props in as many components as you want directly from the global state. – apokryfos Apr 10 '19 at 13:25
  • Shilly: key 2 of first object in array of Object 2 should point to value of key 3 of the Object1. apokryfos: I am planning to do that. Ideally I would connect it with Java backend through REST and Spring MVC, but I have not been successful with that so far. – Faire Apr 10 '19 at 13:37
  • Why not use a local variable (inside your constructor function) for both? I can't see anything in your question that explains why referencing Object 1 from Object 2 is necessary. What context are we missing? – Jake Worth Apr 10 '19 at 13:38
  • 2
    I find this answer https://stackoverflow.com/a/42437104/9203132 interesting and it worked for me – António Ferreira Apr 10 '19 at 15:25
  • Jake: that would be the las paragraph of my question - both objects are used to render different components. The second component renders a value that is deried from a value in the first object. I could pass both objects to the second component, I was just trying to find a more "clean" solution. – Faire Apr 12 '19 at 13:29

2 Answers2

0

As state should be predictable and serializable IMHO is a better solution to hydrate your object at runtime:

this.state = {
        Object1: {
          key1: 1,
          key2: 2,
          key3: 3
        },

        Object2: [
            {
                key1: "...",
            },
        ]
    };
    

// Hydrate method
getObject2 = () => this.state.Object2.map(
  obj => ({...obj, key2: this.state.Object1.key3 })
)

console.log(getObject2());

// Simulating setState()
this.state.Object1.key3 = "Test"

console.log(getObject2());
Mosè Raguzzini
  • 15,399
  • 1
  • 31
  • 43
-3

You might want to try something like this:

this.state = {}

this.state.Object_1 = {
          key_1: 1,
          key_2: 2,
          key_3: "this is it",
        }

this.state.Object_2 = [
            {
                key_1: "...",
                key_2: this.state.Object_1.key_3,
            },
            {
             
            },
        ];
        
console.log(this.state);
Usagi Miyamoto
  • 6,196
  • 1
  • 19
  • 33
  • That was the first thing I tried, I got error: "TypeError: Cannot read property '...' of undefined." – Faire Apr 10 '19 at 13:39
  • I have tried it again to no avail, the error remains the same. TypeError: Cannot read property 'abilities' of undefined – Faire Apr 12 '19 at 13:26