I have created a minimized test site on codesandbox.io to illustrate my issue:
[https://codesandbox.io/s/floral-glitter-ege9o?file=/src/functions/helperFunctions.js]
It appears to me the component to which I am passing props receives props other than what I am providing. I would appreciate any assistance in understanding why this is occurring.
On the Home.js page, I am mapping over an array of items from the provided local data file (data/data.js). For this test, I display on the sandbox browser the id property of the data item being supplied as props to the component. I have also logged to the console the value of the prop within the map method. One may see, however, with a few sandbox browser refreshes that the two values do not always match.
Little Update (but still no answer) :
It seems to matter how I am preparing the data before mapping over it to create the TestCard component. Why should that matter? Of course, when I use the raw data before messing with it, it just displays all data in order without issue.
I need to be able to find only data that has images (in the real project data, some items in the data array don’t have images), and then randomize the selection to display different images on each page visit.
Latest Update (with an answer) :
A programmer friend of mine assisted me with finding an answer to this. It seemed no matter how I pulled the code apart and inspected each line, or rewrote it as simpler methods and with simpler data, it still would not work.
His answer was to simply remove everything from inside the Home() function block in Home.js, except for the function's return statement for the display. I moved every line of code up above the Home() function and all data showed integrity at every line.
Why this worked, however, for me is still a mystery. I will definitely continue my research into it. If anyone seeing this has time to share their thoughts, I would certainly appreciate it.
Top comments (0)