React-table not updating data

[suriya619]

What i need:

• On clicking more icon in a particular row a popup should show.

Facing Issue:

• I set row id in a state and that value not coming inside the row, so i can not validate the selected row id to state value to show or hide the popup.
• the state update only the table is reloaded.

My code:
react-table_issue.txt

[wb-ts]

To resolve this issue, you can modify your code as follows:

1. Remove the selectingMenu state from the Table component and replace it with a new state called selectedRowId. Initialize it with an empty string.

2. Update the handleMenu function to set the selectedRowId state instead of the selectingMenu state.

const handleMenu = (cell: any) => {
  console.log(cell, 'celldd');
  setSelectedRowId(cell.row.id);
};

3. Replace the condition in the more column's Cell component to check if the row's id matches the selectedRowId state value.

{
  row.row.id === selectedRowId && <DropdownMenu />
}

With these modifications, the selectedRowId state will be correctly updated when clicking the "more" icon, and the popup will be shown based on the matching row id.

This is the updated code.

import React, { useState, useMemo, useEffect } from 'react';
import { useTable, useRowSelect, useSortBy, usePagination } from 'react-table';

//Components
import DropdownMenu from './DropdownMenu';
import Toast from '../Toast/Toast';

//Icons
import {
  MenuVertical,
  SortAscending,
  SortDescending,
} from '@assets/icons/svgIcons';

//Styles
import './style.scss';

const Table = (props: any) => {
  const { data, columns, setApproveSelected } = props;
  const [selectedRowId, setSelectedRowId] = useState('');

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
  }: any = useTable(
    { columns, data },
    useSortBy,
    usePagination,
    useRowSelect,
    (hooks) => {
      hooks.visibleColumns.push(() => {
        return [
          // ...rest of the columns
          {
            id: 'more',
            Header: '',
            Cell: (row: any) => (
              <>
                <div className='drop__icon'>
                  <img
                    src={MenuVertical}
                    alt='Visible'
                    className='__otherContent'
                    onClick={() => handleMenu(row)}
                  />
                  {row.row.id === selectedRowId && <DropdownMenu />}
                </div>
              </>
            ),
            accessor: 'more',
            isSortable: false,
            disableSortBy: true,
          },
        ];
      });
    },
  );

  const handleMenu = (cell: any) => {
    console.log(cell, 'celldd');
    setSelectedRowId(cell.row.id);
  };

  // rest of the function

  return (
    <>
      <Toast
        text='Success, Student will be notified via email'
        isSuccess={true}
      />
      <div className='maniTableContainer'>
        <div className='maniTableContainer __scrollView'>
          <table
            {...getTableProps()}
            className='maniTableContainer __mainTable'
          >
            {/* rest of the table rendering */}
          </table>
        </div>
      </div>
    </>
  );
};

export default Table;

Please note that the modifications have been made inside the useTable() call and in the handleMenu() function. The selectedRowId state is now used to conditionally render the dropdown menu based on the matching row id.

Let me know if you need any further assistance!