Question 405175 in Reactjs Question posted in
The new location for the React Documentation can be found here.

ReactJS: map & filter

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…

Tags:

2

Answers


  1. 0

    You can do that simply with these steps.

    Step 1,
    You can provide all your packingLocation inside an array like this

    const packingLocations = ['A', 'B']; // provide all locations.

    OR

    Step 1b. You can also make use of set if you don’t want duplicates

    const uniquePackingLocations = [...new Set(categorizedDatas2[key]?.items.map(item => item.packingLocation))];

    Step 2, use filter items for the current locations.

    uniquePackingLocations.map((location) => {
  // Filter items for the current packingLocation
  const filteredItems = categorizedDatas2[key]?.items.filter(item => item.packingLocation === location);

  if (filteredItems?.length) {
    return (
      <Table key={location}>
        <TableHead>
          <TableRow>
            <TableCell>Packing Location</TableCell>
            <TableCell>Name</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {filteredItems.map((item, index) => (
            <TableRow key={index}>
              <TableCell>{item.packingLocation}</TableCell>
              <TableCell>{item.Name}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    );
  }
  return null; // if there is no item to render
    Login or Signup to reply.
  2. 0

    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.

    const groupedByLocation = categorizedDatas2[key]?.itemsitems.reduce((group, item) => {
const { packingLocation } = item;
if (!group[packingLocation]) {
    group[packingLocation] = [];  // Initialize array if it doesn't exist
}
group[packingLocation].push(item);  // Add the item to the array
    return group;
}, {});

    and then use it like this

    Object.keys(groupedByLocation).map((key,i) => {
    const items = groupedByLocation[key];
    items.map((item,index) => {
        return (
        <>
        <Table>
         <TableRow>
          <TableCell>{key}</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>{item.Name}</TableCell>
        </TableRow>
        </Table>
        </>
      )
    })
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search