How do I take every string value in the imageKeys array and use it to construct a url in the images array in the nested object imageList, without mutating the object?
const myInitialStateFromParent = {
imageKeys: ['name1', 'name2'],
itemType: "something",
itemName: "something else",
ImageList:{
images: [],
height: 100,
width: 100,
maxImages: 2
}
}
for each key in imageKeys I want to add a new object in the empty images array. eg:
{url: baseUrl + '/' + 'name1'},
{url: baseUrl + '/' + 'name2'}
I want to keep everything else in the entire object the same. This is in a React child function component, useEffect(() => {}, [imageKeys]).
I tried something like,
for (const k of myInitialStateFromParent.imageKeys) {
var img = {url: `baseUrl${k}`}
[...myInitialStateFromParent.ImageList.images, img] // copy the images, insert new one
}
But I'm getting an error about spread only working with the last formal parameter.
const myInitialStateFromParent = {
imageKeys: ['name1', 'name2'],
itemType: "something",
itemName: "something else",
ImageList:{
images: [],
height: 100,
width: 100,
maxImages: 2
}
}
const baseUrl = 'dummyUrl';
function mapUrls(object) {
const { imageKeys, ImageList } = object;
const newImagesList = {
...ImageList,
images: imageKeys.map((string) => ({ url: `${baseUrl}/${string}`}))
};
return {
...object,
ImageList: newImagesList
}
}
console.log(mapUrls(myInitialStateFromParent))In your case you just need to push values to your images array:
Easy way:
myInitialStateFromParent.imageKeys.forEach((k) => {
myInitialStateFromParent.ImageList.images.push({ url: `baseUrl${k}` });
});
You're not assigning values in your code, in order to use your code and have results you have to change it, and assign the new values to that array.
Hard way:
for (const k of myInitialStateFromParent.imageKeys) {
const img = { url: `baseUrl${k}` };
myInitialStateFromParent.ImageList.images = [
...myInitialStateFromParent.ImageList.images,
img,
];
// or
// myInitialStateFromParent.ImageList.images = myInitialStateFromParent.ImageList.images.concat(img);
}
You can use this code:
const myInitialStateFromParent = {
imageKeys: ['name1', 'name2'],
itemType: "something",
itemName: "something else",
ImageList:{
images: [],
height: 100,
width: 100,
maxImages: 2
}
}
myInitialStateFromParent.imageKeys.forEach(key=>{
return myInitialStateFromParent.ImageList.images.push({url: 'baseURL'+key})
})
console.log(myInitialStateFromParent.ImageList.images)