I have the following:
<code>{Object.keys(categorizedDataFoods2).map((key, index) => {
const uniquePackingLocationsF = [...new Set(categorizedDataFoods2[key]?.items.sort((a, b) => a.packingLocation.localeCompare(b.packingLocation)).map(item => item.packingLocation))];
{uniquePackingLocationsF.map((location) => {
const filteredItemsF = categorizedDataFoods2[key]?.items.filter(item => item.packingLocation === location);
return (
<Table className="finallist" key={location}>
<TableHead>
<TableRow>
<TableCell><b style={{textTransform:'uppercase'}}>FOOD</b></TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredItemsF.map((item, index) => {
return (
<TableRow key={index}>
<TableCell>{item.Category}</TableCell>
<TableCell>{item.Quantity} x {item.Name}</TableCell>
</TableRow>
)}
)}
</TableBody>
</Table>
);
})}})}
</code>
<code>{Object.keys(categorizedDataFoods2).map((key, index) => {
const uniquePackingLocationsF = [...new Set(categorizedDataFoods2[key]?.items.sort((a, b) => a.packingLocation.localeCompare(b.packingLocation)).map(item => item.packingLocation))];
{uniquePackingLocationsF.map((location) => {
const filteredItemsF = categorizedDataFoods2[key]?.items.filter(item => item.packingLocation === location);
return (
<Table className="finallist" key={location}>
<TableHead>
<TableRow>
<TableCell><b style={{textTransform:'uppercase'}}>FOOD</b></TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredItemsF.map((item, index) => {
return (
<TableRow key={index}>
<TableCell>{item.Category}</TableCell>
<TableCell>{item.Quantity} x {item.Name}</TableCell>
</TableRow>
)}
)}
</TableBody>
</Table>
);
})}})}
</code>
{Object.keys(categorizedDataFoods2).map((key, index) => {
const uniquePackingLocationsF = [...new Set(categorizedDataFoods2[key]?.items.sort((a, b) => a.packingLocation.localeCompare(b.packingLocation)).map(item => item.packingLocation))];
{uniquePackingLocationsF.map((location) => {
const filteredItemsF = categorizedDataFoods2[key]?.items.filter(item => item.packingLocation === location);
return (
<Table className="finallist" key={location}>
<TableHead>
<TableRow>
<TableCell><b style={{textTransform:'uppercase'}}>FOOD</b></TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredItemsF.map((item, index) => {
return (
<TableRow key={index}>
<TableCell>{item.Category}</TableCell>
<TableCell>{item.Quantity} x {item.Name}</TableCell>
</TableRow>
)}
)}
</TableBody>
</Table>
);
})}})}
Doing a console.log at every point returns data (ie. categorizedDataFoods2, uniquePackingLocationsF, item.Name etc) but nothing renders on screen. I don’t see any reason why it shouldn’t, so am a little perplexed. Even if I return a simple string – it still doesn’t show on screen…
You need the outer map to return some JSX for it to be displayed.
<code> {Object.keys(categorizedDataFoods2).map((key, index) => {
const uniquePackingLocationsF = [...new Set(categorizedDataFoods2[key]?.items.sort((a, b) => a.packingLocation.localeCompare(b.packingLocation)).map(item => item.packingLocation))];
return uniquePackingLocationsF.map((location) => {
const filteredItemsF = categorizedDataFoods2[key]?.items.filter(item => item.packingLocation === location);
return (
<Table className="finallist" key={location}>
<TableHead>
<TableRow>
<TableCell><b style={{textTransform:'uppercase'}}>FOOD</b></TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredItemsF.map((item, index) => {
return (
<TableRow key={index}>
<TableCell>{item.Category}</TableCell>
<TableCell>{item.Quantity} x {item.Name}</TableCell>
</TableRow>
)}
)}
</TableBody>
</Table>
);
})})}
</code>
<code> {Object.keys(categorizedDataFoods2).map((key, index) => {
const uniquePackingLocationsF = [...new Set(categorizedDataFoods2[key]?.items.sort((a, b) => a.packingLocation.localeCompare(b.packingLocation)).map(item => item.packingLocation))];
return uniquePackingLocationsF.map((location) => {
const filteredItemsF = categorizedDataFoods2[key]?.items.filter(item => item.packingLocation === location);
return (
<Table className="finallist" key={location}>
<TableHead>
<TableRow>
<TableCell><b style={{textTransform:'uppercase'}}>FOOD</b></TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredItemsF.map((item, index) => {
return (
<TableRow key={index}>
<TableCell>{item.Category}</TableCell>
<TableCell>{item.Quantity} x {item.Name}</TableCell>
</TableRow>
)}
)}
</TableBody>
</Table>
);
})})}
</code>
{Object.keys(categorizedDataFoods2).map((key, index) => {
const uniquePackingLocationsF = [...new Set(categorizedDataFoods2[key]?.items.sort((a, b) => a.packingLocation.localeCompare(b.packingLocation)).map(item => item.packingLocation))];
return uniquePackingLocationsF.map((location) => {
const filteredItemsF = categorizedDataFoods2[key]?.items.filter(item => item.packingLocation === location);
return (
<Table className="finallist" key={location}>
<TableHead>
<TableRow>
<TableCell><b style={{textTransform:'uppercase'}}>FOOD</b></TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredItemsF.map((item, index) => {
return (
<TableRow key={index}>
<TableCell>{item.Category}</TableCell>
<TableCell>{item.Quantity} x {item.Name}</TableCell>
</TableRow>
)}
)}
</TableBody>
</Table>
);
})})}