State update on Redux is not re rendering the table

[SandipDhang]

My Data is updating on redux state also my component successfully receives the state but all the components that have access of the state inside the Columns array are not updating.

  const { list } = useSelector((state) => state.data);

  const columns = [ 
{
      id: 'action',
      minWidth: '100px',
      maxWidth: '100px',
      selector: (row) => (
        <div className='em-data-table-cell cell-action'>
          <CustomSwitch
            isChecked={row?.is_active}
            onChange={ myAPICall to update state data }
          />
                {/*console.log({ list, row }) */}
          <button className='row-delete-icon'>
            <DeleteIcon.default />
          </button>
        </div>
      ),
    },
 ]

My CustomSwitch component is

const CustomSwitch = ({ isChecked, onChange }) => {
  const handleCheckChange = (checkedValue) => {
    if (onChange) onChange(checkedValue);
  };

  return (
    <Switch
      checked={isChecked}
      className={`em-switch ${isChecked ? 'checked' : ''}`}
      checkedIcon={false}
      uncheckedIcon={false}
      offColor='#ffffff'
      onColor='#ffffff'
      onChange={handleCheckChange}
      offHandleColor='#0D0F19'
      onHandleColor='#09a375'
      height={30}
      width={44}
      handleDiameter={20}
    />
  );
};

The rest of the component is updating even if I open the commented log there list is the updated list but the row still holds the old record.

[dj0024javia]

try using the spread operator. That worked for me on a similar problem for different datatable

[SandipDhang]

Where and what you want me to use spread.

In Columns Array = [
   {
       //... other props
      selector: ( { ...row} ) => //here to spread
   }
]

OR

in Table Tag

<DataTable
   ...other props
   data={{...list}} // here to spread
/>

[dj0024javia]

In table tab. On Mon, Aug 1, 2022, 7:45 PM Sandip Dhang @.***> wrote:

Where and what you want me to use spread.

In Columns Array = [ { //... other props selector: ( { ...row} ) => //here to spread }] OR in Table Tag <DataTable ...other props data={{...list}} // here to spread/>

— Reply to this email directly, view it on GitHub https://github.com/jbetancur/react-data-table-component/issues/1087#issuecomment-1201264615, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHSL2LKCVVWQMOQXEEFEAIDVW7LW7ANCNFSM54TKPUNA . You are receiving this because you commented.Message ID: @.***>