I'm trying to loop over data from Sanity using GraphQL. I've set up my .map to loop over the larger information and return an array of everything, which is working well; however, when it comes to the arrays within my .map I can't seem to figure out how to loop over them properly and display each data line from the array.
I need to be able to do this with three different data sets within the .map. This is probably easier than I'm making it, but if anyone could help me break through the mental fog on this would be appreciated. Here's the function (this is a component file btw):
const { minutes } = useStaticQuery(graphql`
query {
minutes: allSanityMinutes {
nodes {
contributors
endTime(formatString: "h:mma [on] MM/DD/YYYY")
id
insertReport {
treasurersName
totalBalance
slug {
current
}
notes
id
dateGenerated(formatString: "MM/DD/YYYY")
approvedBudget
expenses {
amountOfExpense
dayOfExpense
nameOfExpense
timeframe
}
}
meetingStart(formatString: "h:mma [on] MM/DD/YYYY")
members {
... on SanityBoardMembers {
id
email
phone
name
}
... on SanityOtherMembers {
newMember
}
}
name
newBusiness
oldBusiness
tags
teleconference
}
}
}
`);
const allMinutes = minutes.nodes;
console.log(allMinutes);
return (
<CardStyles>
{allMinutes.map((minute, index) => (
<ItemStyles>
<div className="card" key={minute.id}>
<div className="title">Called to order by: {minute.name}</div>
<div className="content">
Meeting began at: {minute.meetingStart}
</div>
<br />
<div className="content">
There were {minute.contributors} members that contributed proxy
information.
</div>
<br />
<div className="content">
Those present are: **List of Members**
</div>
<br />
<TreasurerStyles>
The treasurers report is as follows:{' '}
<section>
<ul>
<li className="full">
<div>
<strong>Treasurer:</strong>{' '}
{minute.insertReport.treasurersName}
</div>
</li>
<li className="full">
<div>
<strong>Date:</strong> {minute.insertReport.dateGenerated}
</div>
</li>
<li className="quarter">
<div data-name="Date">
<strong>Date</strong>
</div>
<div data-name="Place">
<strong>Place</strong>
</div>
<div data-name="Cost">
<strong>Cost</strong>
</div>
<div data-name="Timeframe">
<strong>Timeframe</strong>
</div>
</li>
<li className="quarter">
<div>
{minute.insertReport.expenses[index].dayOfExpense}
</div>
<div>
{minute.insertReport.expenses[index].nameOfExpense}
</div>
<div>
{formatMoney(
minute.insertReport.expenses[index].amountOfExpense
)}
</div>
<div>{minute.insertReport.expenses[index].timeframe}</div>
</li>
<li className="full">
<div>
<strong>Total Balance:</strong>{' '}
{formatMoney(minute.insertReport.totalBalance)}
</div>
</li>
<li className="full">
<div>
<strong>Notes:</strong> {minute.insertReport.notes}
</div>
</li>
<li className="full">
<div>Budget was approved as shown.</div>
</li>
</ul>
</section>
</TreasurerStyles>
<br />
<div className="content">
<strong>Old Business:</strong>
<br /> {minute.oldBusiness}
</div>
<br />
<div className="content">
<strong>New Business:</strong> <br />
{minute.newBusiness}
</div>
<br />
<div className="content">Meeting ended at: {minute.endTime}</div>
<br />
<div className="content">Tags: {minute.tags}</div>
</div>
</ItemStyles>
))}
</CardStyles>
);
}
The map returns an array, like this:
0: {…}
contributors: 8
endTime: "12:10am on 04/17/2021"
id: "-0512c8fe-6603-5ac2-84de-0b34befdcbb9"
insertReport: Object { treasurersName: "Margi Name", totalBalance: 4291189, notes: "Total does not include money that will be collected from HOA dues bill that was recently sent.", … }
meetingStart: "11:33pm on 10/14/2020"
members: (10) […]
0: Object { __typename: "SanityOtherMembers", newMember: "Carl and Katty Three" }
1: Object { __typename: "SanityOtherMembers", newMember: "Linn and Bill One" }
2: Object { __typename: "SanityOtherMembers", newMember: "Enrique Eight" }
3: Object { __typename: "SanityOtherMembers", newMember: "Dee Five" }
4: Object { __typename: "SanityOtherMembers", newMember: "Liz Six" }
5: Object { __typename: "SanityOtherMembers", newMember: "Dan and Diana Nine" }
6: Object { __typename: "SanityOtherMembers", newMember: "Paul and Pat Seven" }
7: Object { __typename: "SanityOtherMembers", newMember: "Bob and Betty Four" }
8: Object { __typename: "SanityOtherMembers", newMember: "Margi Name" }
9: Object { __typename: "SanityOtherMembers", newMember: "Tom Two" }
length: 10
<prototype>: Array []
name: "Johnny Five"
newBusiness: (3) […]
0: "Trash removal needs to be negotiated for the coming year. Kat Name offered to contact Sheila Noname from Grand Mesa Metro District to coordinate this service."
1: "New officers for the association that were voted on and approved are the following people: Randall One [President], Dee Two [Vice-President], Margi Three [Sec'y/Treasurer]"
2: "Design Review Committee: Example One [Chairman], Fred Two, Tom Three, Pat Four, Johnny Five, Phil Six, Carl Seven"
length: 3
<prototype>: Array []
oldBusiness: Array [ "See included treasurers report." ]
tags: Array [ "treasurers report, trash removal, new officers, design review committee, october, 14, 2020" ]
teleconference: true
<prototype>: Object { … }
length: 1
<prototype>: Array []
MinutesItemGrid.js:87
