score:1

Accepted answer

this is a working solution of what you want to achieve: codesanbox.

basically, you need two states for each of your items to determine if it is selected, and if it is hidden. an item is only selected when it is, well, selected by clicking the button in the last column. only when you press apply is it actually hidden (and as an extra, clear all selection).

const [hidden, sethidden] = usestate({});
//...

const handleclick = () => {
  if (/* hide item */) {
    // hide currently selected items
    const currentlyselected = {};
    object.entries(selected).foreach(([id, isselected]) => {
      if (isselected) {
        currentlyselected[id] = isselected;
      }
    });
    sethidden({ ...hidden, ...currentlyselected });

    // clear all selection
    const newselected = {};
    object.keys(selected).foreach((id) => {
      newselected[id] = false;
    });
    setselected(newselected);
  }
};

when you need to show the hidden items, you do the reverse: change their state from hidden to selected (pre-select them for easy toggling).

const handleclick = () => {
  if (/* show item */) {
    // select all currently hidden items
    const currentlyhidden = {};
    object.entries(hidden).foreach(([id, ishidden]) => {
      if (ishidden) {
        currentlyhidden[id] = ishidden;
      }
    });
    setselected({ ...selected, ...currentlyhidden });

    // clear all hidden items
    const newhidden = {};
    object.keys(hidden).foreach((id) => {
      newhidden[id] = false;
    });
    sethidden(newhidden);
  }
};

with these two states, you don't need the hideselected flag anymore, so remove it. now the question becomes, when should the button becomes apply, and when should it be cancel? in my example, the button displays apply (and hide the selected rows) only if at least one row is selected, else it would display cancel (and show the hidden rows on click).

// if any row is selected, the button should be in the apply state
// else it should be in the cancel state
const buttonmode = object.values(selected).some((isselected) => isselected)
  ? 'apply'
  : 'cancel';

now we have the final solution. if you are still confused about this, leave a comment and i will reply.

score:1

it is happening because of the value of hideselected. when you click on show for first time hideselected is false. the id of the item is stored as selected={ [id]: true }. now when you click apply the hideselected becomes true and your selected row is hidden. now when you click on show for second time value of hideselcted is already true so your matchdata function will directly filter that row out and it will be hidden.


Related Query

More Query from same tag