title: ReactJs-Table-Array: An element is missing while displaying the elements of an array in a table
body: <p>I have a project and in this project the salaries of the employees are displayed within a table, and I fetch the data from the backend and display it in this table</p>
  <p>And the responses returned from the backend are:</p>
  <pre><code>{
      &quot;data&quot;: [
          {
              &quot;id&quot;: 2,
              &quot;userId&quot;: 26,
              &quot;createdAt&quot;: &quot;2022-02-26T15:33:40.977Z&quot;,
              &quot;updatedAt&quot;: &quot;2022-02-26T15:33:40.977Z&quot;,
              &quot;deletedAt&quot;: null,
              &quot;user&quot;: {
                  &quot;name&quot;: &quot;samara kamal&quot;,
                  &quot;roles&quot;: [
                      &quot;user&quot;
                  ],
                  &quot;id&quot;: 26,
                  &quot;email&quot;: &quot;samara@ria.com&quot;,
                  &quot;firstName&quot;: &quot;samara&quot;,
                  &quot;lastName&quot;: &quot;kamal&quot;,
                  &quot;phoneNumber&quot;: &quot;0947483381&quot;,
                  &quot;avatarId&quot;: null,
                  &quot;isActive&quot;: true,
                  &quot;isVerified&quot;: true,
                  &quot;createdAt&quot;: &quot;2022-02-14T20:49:16.841Z&quot;,
                  &quot;updatedAt&quot;: &quot;2022-02-14T21:00:02.638Z&quot;,
                  &quot;deletedAt&quot;: null,
                  &quot;associatedRoles&quot;: [
                      {
                          &quot;id&quot;: 22,
                          &quot;userId&quot;: 26,
                          &quot;roleId&quot;: 5,
                          &quot;role&quot;: {
                              &quot;id&quot;: 5,
                              &quot;name&quot;: &quot;user&quot;
                          }
                      }
                  ],
                  &quot;avatar&quot;: null
              },
              &quot;salary&quot;: {
                  &quot;id&quot;: 2,
                  &quot;workStartDate&quot;: &quot;2022-01-01T01:00:00.000Z&quot;,
                  &quot;workEndDate&quot;: &quot;2022-02-01T01:00:00.000Z&quot;,
                  &quot;amount&quot;: 1500,
                  &quot;bonus&quot;: 150,
                  &quot;allowance&quot;: 0,
                  &quot;receiptId&quot;: 2,
                  &quot;createdAt&quot;: &quot;2022-02-26T15:33:40.987Z&quot;,
                  &quot;updatedAt&quot;: &quot;2022-02-26T15:33:40.987Z&quot;,
                  &quot;deletedAt&quot;: null
              },
              &quot;deductions&quot;: [
                  {
                      &quot;id&quot;: 2,
                      &quot;receiptId&quot;: 2,
                      &quot;type&quot;: &quot;loan&quot;,
                      &quot;amount&quot;: 200,
                      &quot;reason&quot;: &quot;You have took a loan...&quot;,
                      &quot;createdAt&quot;: &quot;2022-02-26T15:33:40.991Z&quot;,
                      &quot;updatedAt&quot;: &quot;2022-02-26T15:33:40.991Z&quot;,
                      &quot;deletedAt&quot;: null
                  }
              ]
          },
          {
              &quot;id&quot;: 1,
              &quot;userId&quot;: 26,
              &quot;createdAt&quot;: &quot;2022-02-26T10:32:19.082Z&quot;,
              &quot;updatedAt&quot;: &quot;2022-02-26T10:32:19.082Z&quot;,
              &quot;deletedAt&quot;: null,
              &quot;user&quot;: {
                  &quot;name&quot;: &quot;samara kamal&quot;,
                  &quot;roles&quot;: [
                      &quot;user&quot;
                  ],
                  &quot;id&quot;: 26,
                  &quot;email&quot;: &quot;samara@ria.com&quot;,
                  &quot;firstName&quot;: &quot;samara&quot;,
                  &quot;lastName&quot;: &quot;kamal&quot;,
                  &quot;phoneNumber&quot;: &quot;0947483381&quot;,
                  &quot;avatarId&quot;: null,
                  &quot;isActive&quot;: true,
                  &quot;isVerified&quot;: true,
                  &quot;createdAt&quot;: &quot;2022-02-14T20:49:16.841Z&quot;,
                  &quot;updatedAt&quot;: &quot;2022-02-14T21:00:02.638Z&quot;,
                  &quot;deletedAt&quot;: null,
                  &quot;associatedRoles&quot;: [
                      {
                          &quot;id&quot;: 22,
                          &quot;userId&quot;: 26,
                          &quot;roleId&quot;: 5,
                          &quot;role&quot;: {
                              &quot;id&quot;: 5,
                              &quot;name&quot;: &quot;user&quot;
                          }
                      }
                  ],
                  &quot;avatar&quot;: null
              },
              &quot;salary&quot;: {
                  &quot;id&quot;: 1,
                  &quot;workStartDate&quot;: &quot;2022-01-01T01:00:00.000Z&quot;,
                  &quot;workEndDate&quot;: &quot;2022-02-01T01:00:00.000Z&quot;,
                  &quot;amount&quot;: 2500,
                  &quot;bonus&quot;: 200,
                  &quot;allowance&quot;: 0,
                  &quot;receiptId&quot;: 1,
                  &quot;createdAt&quot;: &quot;2022-02-26T10:32:19.095Z&quot;,
                  &quot;updatedAt&quot;: &quot;2022-02-26T10:32:19.095Z&quot;,
                  &quot;deletedAt&quot;: null
              },
              &quot;deductions&quot;: [
                  {
                      &quot;id&quot;: 1,
                      &quot;receiptId&quot;: 1,
                      &quot;type&quot;: &quot;loan&quot;,
                      &quot;amount&quot;: 200,
                      &quot;reason&quot;: &quot;You have took a loan...&quot;,
                      &quot;createdAt&quot;: &quot;2022-02-26T10:32:19.104Z&quot;,
                      &quot;updatedAt&quot;: &quot;2022-02-26T10:32:19.104Z&quot;,
                      &quot;deletedAt&quot;: null
                  }
              ]
          }
      ],
      &quot;count&quot;: 2
  }
  </code></pre>
  <p>And as it is clear from the previous responses, there is a matrix of deductions</p>
  <p>And through this simple code, I tried to access the &quot;deductions.amount&quot;:</p>
  <pre><code>                    {n.deductions.map((deduction) =&gt; {
                        &lt;TableCell
                          // className=&quot;p-4 md:p-10&quot;
                          component=&quot;th&quot;
                          scope=&quot;row&quot;
                          align=&quot;left&quot;
                        &gt;
                          {deduction.amount}
                        
                        &lt;/TableCell&gt;;
                      })}
  </code></pre>
  <p>but it did not appear in the table as it is clear in this image:</p>
  <p><a href="https://i.stack.imgur.com/mBUcR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mBUcR.png" alt="enter image description here" /></a></p>
  <p>How can I solve the problem?</p>
  <p>This is the complete table file:</p>
  <p>salaryTable.js:</p>
  <pre><code>  return (
      &lt;div className=&quot;w-full flex flex-col&quot;&gt;
        &lt;FuseScrollbars className=&quot;flex-grow overflow-x-auto&quot;&gt;
          &lt;Table stickyHeader className=&quot;min-w-xl&quot; aria-labelledby=&quot;tableTitle&quot;&gt;
            &lt;ProductsTableHead
              selectedProductIds={selected}
              order={order}
              onSelectAllClick={handleSelectAllClick}
              onRequestSort={handleRequestSort}
              rowCount={data.length}
              onMenuItemClick={handleDeselect}
            /&gt;
  
            &lt;TableBody&gt;
              {_.orderBy(
                data,
                [
                  (o) =&gt; {
                    switch (order.id) {
                      case &quot;categories&quot;: {
                        return o.categories[0];
                      }
                      default: {
                        return o[order.id];
                      }
                    }
                  },
                ],
                [order.direction]
              )
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map((n) =&gt; {
                  const isSelected = selected.indexOf(n.id) !== -1;
                  return (
                    &lt;TableRow
                      className=&quot;h-72 cursor-pointer&quot;
                      hover
                      role=&quot;checkbox&quot;
                      aria-checked={isSelected}
                      tabIndex={-1}
                      key={n.id}
                      selected={isSelected}
                      onClick={(event) =&gt; handleClick(n)}
                    &gt;
                      &lt;TableCell
                        className=&quot;w-40 md:w-64 text-center&quot;
                        padding=&quot;none&quot;
                      &gt;
                        &lt;Checkbox
                          checked={isSelected}
                          onClick={(event) =&gt; event.stopPropagation()}
                          onChange={(event) =&gt; handleCheck(event, n.id)}
                        /&gt;
                      &lt;/TableCell&gt;
  
                      &lt;TableCell
                        className=&quot;p-4 md:p-16&quot;
                        component=&quot;th&quot;
                        scope=&quot;row&quot;
                      &gt;
                        {n.user.name}
                      &lt;/TableCell&gt;
  
                      &lt;TableCell
                        className=&quot;p-4 md:p-16 truncate&quot;
                        component=&quot;th&quot;
                        scope=&quot;row&quot;
                      &gt;
                        {n.salary.amount}
                        &lt;span&gt;£S&lt;/span&gt;
                      &lt;/TableCell&gt;
  
                      &lt;TableCell
                        className=&quot;p-4 md:p-16&quot;
                        component=&quot;th&quot;
                        scope=&quot;row&quot;
                        align=&quot;left&quot;
                      &gt;
                        {n.salary.bonus}
                        &lt;span&gt;£S&lt;/span&gt;
                      &lt;/TableCell&gt;
                      {n.deductions.map((deduction) =&gt; {
                        &lt;TableCell
                          // className=&quot;p-4 md:p-10&quot;
                          component=&quot;th&quot;
                          scope=&quot;row&quot;
                          align=&quot;left&quot;
                        &gt;
                          {deduction.amount}
                          {/* &lt;span&gt;£S&lt;/span&gt; */}
                          {/* &lt;i
     className={clsx(
       &quot;inline-block w-8 h-8 rounded mx-8&quot;,
       n.quantity &lt;= 5 &amp;&amp; &quot;bg-red&quot;,
       n.quantity &gt; 5 &amp;&amp; n.quantity &lt;= 25 &amp;&amp; &quot;bg-orange&quot;,
       n.quantity &gt; 25 &amp;&amp; &quot;bg-green&quot;
     )}
   /&gt; */}
                        &lt;/TableCell&gt;;
                      })}
                    &lt;/TableRow&gt;
                  );
                })}
            &lt;/TableBody&gt;
          &lt;/Table&gt;
        &lt;/FuseScrollbars&gt;
  
        &lt;TablePagination
          className=&quot;flex-shrink-0 border-t-1&quot;
          component=&quot;div&quot;
          count={data.length}
          rowsPerPage={rowsPerPage}
          page={page}
          backIconButtonProps={{
            &quot;aria-label&quot;: &quot;Previous Page&quot;,
          }}
          nextIconButtonProps={{
            &quot;aria-label&quot;: &quot;Next Page&quot;,
          }}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
        /&gt;
      &lt;/div&gt;
    );
  </code></pre>