How to add copied dictionaries to array in Javascript? - reactjs

Question

I have function named "createdAtRefine" to change items' createdAt from milliseconds to MM/DD below.
const createdAtRefine = (datasum) => {
for (let i = 0; i < datasum.length; ++i) {
datasum[i].createdAt = `${
new Date(parseInt(datasum[i].createdAt)).getMonth() + 1
}/${new Date(parseInt(datasum[i].createdAt)).getDate()}`;
}
return datasum;
};
And I added several dictionary arrays to dataSumArray below.
datasumArray was set [] empty array.
datasumArray.push(
...feedData.seeAdminAllFeeds,
...poemData.seeAdminAllPoems,
...fpLikesData.seeAdminAllLikes,
...fpCommentsData.seeAdminAllComments,
...pedometerData.seeAdminAllPedometers
);
feedData.seeAdminAllFeeds looks like below.
-> [{__typename: 'Feed', id: '3', createdAt: '18382034'}, {__typename: 'Feed', id: '3', createdAt: '18382034'}]
Once all these dictionaries were added to one array I need to change createdAt from milliseconds to 'MM/DD' with above "createdAtRefind" function.
So i run below code.
let createdAtRefind = createdAtRefine(datasumArray);
Then outcome is good, it change to
-> [{__typename: 'Feed', id: '3', createdAt: '10/8'}, {__typename: 'Feed', id: '3', createdAt: '10/8'}]
But Problem is I need to call all this function at first with useEffect like below.
useEffect(() => {
if (
feedData !== undefined &&
feedData !== null &&
poemData !== undefined &&
poemData !== null &&
fpLikesData !== undefined &&
(fpLikesData !== null) & (fpCommentsData !== undefined) &&
fpCommentsData !== null &&
pedometerData !== undefined &&
pedometerData !== null
) {
datasumArray.push(
...feedData.seeAdminAllFeeds,
...poemData.seeAdminAllPoems,
...fpLikesData.seeAdminAllLikes,
...fpCommentsData.seeAdminAllComments,
...pedometerData.seeAdminAllPedometers
);
let createdAtRefind = createdAtRefine(datasumArray);
setDatasum(createdAtRefind);
}
}, [feedData, poemData, fpLikesData, fpCommentsData, pedometerData]);
When I first call this function, it works great.
But if I go to another screen and go back to this screen, **createdAtRefind** becomes all createdAt as '1/1'.
-> [{__typename: 'Feed', id: '3', createdAt: '1/1'}, {__typename: 'Feed', id: '3', createdAt: '1/1'}]
The reason is when I run "createdAtRefine" function, it change the initial data of feedData.seeAdminAllFeeds.
So initial data becomes
-> [{__typename: 'Feed', id: '3', createdAt: '10/8'}, {__typename: 'Feed', id: '3', createdAt: '10/8'}]
And so I run two times createdAtRefind function, so it becomes '1/1'..
I want to run this createdAtRefind function just once when this data comes regardless of screen change.

Answer 1

You're mutating your objects inside the dataSum array. It's best practice in JS, especially in React to avoid mutation. You're getting 1/1 because new Date(parseInt("10/8")).getMonth() + 1 gives you the number 1.
What you can do is use map
const createdAtRefine = (datasum) => {
return datasum.map((data) => ({
...data, // Spread data into new object
createdAt = `${new Date(parseInt(datasum[i].createdAt)).getMonth() + 1}/${new Date(parseInt(datasum[i].createdAt)).getDate()}`
}))
};
Here for each dataSum element I create a new objects with the same keys and values as the original object except for createdAt.
If you're planning on displaying this createdAt date another way to go would be to keep the original datasum array with createdAt in ms and convert only when displaying the date