Existing code:
{categorizedDatas2[key]?.items.map((item, index) => {
if (item.packingLocation == 'A') {
return (
<>
<Table>
<TableRow>
<TableCell>{item.packingLocation}</TableCell>
</TableRow>
<TableRow>
<TableCell>{item.Name}</TableCell>
</TableRow>
</Table>
</>
)
}
if (item.packingLocation == 'B') {
return (
<>
<Table>
<TableRow>
<TableCell>{item.packingLocation}</TableCell>
</TableRow>
<TableRow>
<TableCell>{item.Name}</TableCell>
</TableRow>
</Table>
</>
)
}
})}
What I actually want to do is map through and do a table for each packingLocation (currently as it is in a map it shows the packingLocation on each row) How can I use the map and utilise a filter function so it filters out for packingLocation equal A and then shows the table, and then another table for packingLocation equal B and so forth…
2
Answers
You can do that simply with these steps.
Step 1,
You can provide all your packingLocation inside an
array
like thisOR
Step 1b. You can also make use of set if you don’t want duplicates
Step 2, use
filter
items for the current locations.You have to groupBy your object array on property packingLocation.
you can use helper function to create the group object and then use the newly created object array.
Here is the modified version of your code.
and then use it like this