I am currently in the process of creating a store using nextJS
I have two variables that are being assigned values from my database through a function
let size: Size
let ribbonTable: Ribbon
async function findSizeCategory(): Promise<void> {
const category = product?.category ;
switch(category) {
case "mens":
size = await db.select().from(mens_size);
break;
case "womans":
size = await db.select().from(womans_size);
ribbonTable = await db.select().from(ribbon)
break;
case "kids":
size = await db.select().from(kids_size);
ribbonTable = await db.select().from(ribbon)
break;
}
}
await findSizeCategory()
However, I encounter a typescript error when trying to use them in the map function and if the length of ribbonTable is greater than 0
<label className="block">
What size are you?
<select>
{size.map(s =>
<option key={s.size_id} value={`${s.size_id}`}>{s.size}</option>
)}
</select>
</label>
{ribbonTable && ribbonTable.length > 0 && (
<label className="block ">
Select a ribbon:
<select>
{ribbonTable.map(r =>
<option key={r.ribbon_id} value={r.ribbon_id}>{r.ribbon}</option>
)}
</select>
</label>
)}