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

ReactJS: No data returned on screen

I have the following:

{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…

Tags:

2

Answers


  1. 0

    You need the outer map to return some JSX for it to be displayed.

        {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>
            );
          })})}
    Login or Signup to reply.
  2. 0

    If the issue persists, make sure your categorizedDataFoods2 is correctly initialized and populated before rendering. You can conditionally render the tables after verifying the data exists:

    {categorizedDataFoods2 && Object. Keys(categorizedDataFoods2).length > 0 && (
  Object. Keys(categorizedDataFoods2).map((key, index) => {
    // Your existing code
  })
)}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search