Trying to create a order table, to track my customers weekly order. However I am having trouble listing the orders under correct day in table.
Along with listing their meal selection on day, I am trying to list their selection as well. However mapping directly gives this error.
...
<thead className=" text-sm text-gray-700 uppercase bg-gray-50">
<tr>
<th scope="col" className="py-3 px-1 border-r-2 f">
<div>#</div>
</th>
<th scope="col" className="py-3 px-1 ">
<div>Created</div>
</th>
<th scope="col" className="py-3 px-1 ">
<div>Customer</div>
</th>
<th scope="col" className="py-3 px-1 w-32">
Contact
</th>
{week.map((days, i) => (
<>
<th scope="col" className="py-3 px-1 w-52">
{format(days, "iii do")}
</th>
<th scope="col" className="py-3 px-1 w-52">
{format(days, "iii")} treats
</th>
</>
))}
<th scope="col" className="py-3 px-1 w-52">
Address
</th>
<th scope="col" className="py-3 px-1 w-52">
Delivery Instructions
</th>
<th scope="col" className="py-3 px-1 ">
Grand Total
</th>
</tr>
</thead>
<tbody className="text-xs overflow-x-auto">
{orders.map((order, i) => (
<tr className="bg-white border-b hover:bg-gray-100" key={i}>
<th
scope="row"
className="py-3 px-1 border-r-2 font-medium text-gray-900 whitespace-nowrap"
>
{i}
</th>
<td className="py-3 px-2">
{format(
new Date(order.createdAt.seconds * 1000),
"iii, LLL - do @ pp"
)}
</td>
<td className="py-3 px-1 ">
{order.customer.fName} {order.customer.lName}
</td>
<td className="py-3 px-1 ">
{order.shippingAddress.primaryContact
? order.shippingAddress.primaryContact
: order.shippingAddress.secondaryContact}
</td>
{order.orderItems.map((items, i) =>
items.cat === "mealPlan" ? (
<td key={i}>
<div>
{items.title} ({items.productSize === 0 ? "M" : "L"}) -
{items.side} & {items.treat}
</div>
<div>
{" "}
{items.stringDate
? items.stringDate
: order.shippingAddress.deliveryDate}
</div>
</td>
) : (
""
)
)}
<td className="py-3 px-1 ">
{order.shippingAddress.address},<br />
{order.shippingAddress.parish}
</td>
<td>{order.shippingAddress.deliveryInstructions}</td>
<td className="py-3 px-1 font-medium">${order.totalPrice}</td>
</tr>
))}
</tbody>
I am really lost at what to google or what to try. I tried adding to a list, and sorting y date, but that's a potential bug.