How can I take an object, set it to a specific property that is from a predetermined value that matches a property from another object?

*** I revised the above question so that it would make more sense based upon the intention of my question and the confusion / missunderstanding one might occur from this code pattern.

What I am trying to accomplish in overall terms is the ability to create an object, from being empty, and set it to something that has a property name and at the same time is setting that property name to a value of another object.

What this will allow me to do is create an object that will have a property that will contain an object that has propert(ies) which one of them will be the key, value of which that value will be the name of the property in which the new object is set to.

Why would I need this or want this new object...

The purpose of this pattern, unto which i see the use for is to obtain an object that is set to an interface/name in which the object that is set to the containing property is of the same name to one of the values in the referenced property's value. It sounds confusing so i created a jsbin to illustrate a solution to exactly what I am asking for... If someone else has a better explanation or title for what my question is please advise.

The answer I provide along with code sample is what I am asking and achieving through my understanding.

------PREVIOUS QUESTION--------

The question i have is why or when should one decide to take an objects property and set it to another object. For me, it seems like inheritence "setting" is the reason but I am not 100% sure. Furthermore, I am not sure when i should think of this and in what situations I should decide to use such a pattern.

I can read the code and follow it but the most confusion I have and question relating to is specifically the object[property] = otherObject;

Perhaps this has to do with the Object.assign() construction? What I do know is I have seen this done a few times and a little confused to as why and when i should know to use such a pattern. Still, there may be something else I am missing here.

Here is the code example I am referencing.

constructor(props) {
super(props);
this.state = {
  completedAssets : 0,
  totalAssets : 0,
  currentDownloads: {},
  logs: []
};
}

let currDownloadObject = {
  fileName: fileName,
  currentSize: loaded,
  totalSize: total,
  complete: (loaded === total),
  completeOrder : fileCompleteOrder,
  order: (file) ? file.order : Object.keys(this.state.currentDownloads).length + 1
}

let currentDownloadStateArray = Object.assign({},this.state.currentDownloads);

currentDownloadStateArray[fileName] = currDownloadObject;

this.setState({currentDownloads: currentDownloadStateArray});

Here is an example of the output that is the most confusing for me.

when running this log statement:

console.log('currentDownloadStateArray ', currentDownloadStateArray);

I get this example of a return:

https://navigation/az.png: {fileName: "https://navigation/az.png", currentSize: 7451, totalSize: 7451, complete: true, completeOrder: 1, …}
https://navigation/destination.png: {fileName: "https://avigation/destination.png", currentSize: 8322, totalSize: 8322, complete: true, completeOrder: 2, …}

So now, in effect, currentDownloadStateArray is set to an object with an interface of each of it's fileName's property. <<< Why is this happening and what is it used for

Solution

To create a new object that is set to a value by another object which contains that object you would do the following.

let state = {
  iteratedFoo: {} // this is a dictionary of dictionaried objects... an object which is a collection of objects.
};

let currentDownloadState = (someValue, anotherValue, urlName) => {

let bar = {
  fileName: urlName,
  someProp: someValue,
  anotherProp: anotherValue
}

let foo = Object.assign({}, state['iteratedFoo'] )

// console.log('foo[urlName] = ', foo[urlName]); // undefined because it wasn't set yet on first loop

foo[urlName] = bar;

console.log('bar ', bar);
console.log('foo ', foo);
console.log('foo[urlName] = ', foo[urlName]);

state['iteratedFoo'] = foo;

console.log('state["iteratedFoo"] ', state['iteratedFoo']);
}

currentDownloadState('this value', 'another value', 'www.msn.com');
currentDownloadState('this value', 'another value', 'www.espn.com');
currentDownloadState('this value', 'another value', 'www.theverge.com');

As this function is repeated the iteratedFoo object creates an object that is a collection of the foo object which contains a property name that contains a value that has properties where one of them is the value of the foo property name... in this case foo[urlName]

http://jsbin.com/linebap/1/edit?js,console

The purpose and usecase for this would ultimately to create a collection of objects that are referneced by a property value of said referenced object.

the resulting state.iteratedFoo object now looks like this...

"state[\"iteratedFoo\"] "
[object Object] {
 www.espn.com: [object Object] {
    anotherProp: "another value",
    fileName: "www.espn.com",
    someProp: "this value"
  },
  www.msn.com: [object Object] {
    anotherProp: "another value",
    fileName: "www.msn.com",
    someProp: "this value"
  },
 www.theverge.com: [object Object] {
    anotherProp: "another value",
    fileName: "www.theverge.com",
    someProp: "this value"
  }
}