I'm trying to map through an array and pass data to a React component. I get my data from a headless CMS and can see an array with a length of 8 when trying to console.log the array I am trying to map. However when I try to get the data inside of map loop I get undefined for all data points.
My attempt:
{data.sanityCourses.courses.map(({ node }, index) => (
<CourseBlockFetcher data={node} index={index} formData={data.sanityCourses} />
))}
If I run console.log outside the map using {console.log("Console log outside of the map: ", data.sanityCourses.courses)}
I can see all the values, see attached screenshot
But running console.log inside the map like so console.log("inside the map", node)
only returns undefined. How ever I get 8 instances of "undefined", so the map loops through the correct number of items; but cannot see any of the data. Any ideas on what I could be doing wrong?