score:1
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.
Source: stackoverflow.com
Related Query
- REACT-Why does ONLY my first set of selected rows turn into gray before moving away (the rest just goes away after clicking on Apply button)?
- react, next.js, gatsby.js - does one need to learn react first before diving into next.js or gatsby.js?
- Why does react turn my state into [object object]
- Why does this react form works only for the first time?
- Why does React rerender when the state is set to the same value the first time via an onClick event on DOM, but not react-native?
- Why does React resolve undefined/boolean/null to string only when they are variables?
- React Formik checkbox group does not turn into an array of invidual checked or unchecked elements
- Why does react render an array of strings into an HTML element?
- Why does my React app append the external URL to http://localhost:/<port> and not to ONLY the URL itself?
- Why does my setInterval run only once in react hooks?
- Why does React say not to set 'selected' property on <option> elements?
- Why does graphql not inject my data into react component prop?
- React & AWS Amplify - User does not have delivery config set to turn on SMS_MFA
- Why React component get re-rendered only once when state does not change?
- React Redux putting Array into Store Only Updates on first Change
- Why Does React Render Children Before Parents?
- Why does async function fail as soon as I reference value set by useParams react hook?
- Why does my getImageId function only fire off the first time my code runs?
- Why does does my JS external files not loading into my react page?
- Why only first time React function component getting props
- React Native - I want to set my session state first before I call my API
- Why does my list loop into different widows in React
- Why would someone want to turn a function into a class in react js
- Why does forEach loop only set the last value if finds to state. ReactJS
- Why my React component does not rerender when Set state was changed?
- Why does only the first CSS class of my project working and not the rest
- Why does my React app menu open when I am only changing the state and am not using any CSS?
- Why does react keep changing into an unecessary timezone I just want to create a date object with the same date in the string
- Why does my last todo left do not get delete on first click in react redux
- Why does the first iteration of my update to an array in state does not appear? It will only appear after the second iteration?
More Query from same tag
- Re-rendering app with custom hook not working
- Generate cards dynamically in a 3 column format using data in state variable of a class
- Expected onClick listener to be a function, instead got type object - react redux
- Data not set after fetch in react
- React; go to specific location on web page when button is clicked on another component
- Too many API calls causing error 'Can't set headers after they are sent'
- what will be best Approach for Redux-thunk Async Request to handle onSuccess and onError?
- Cannot read properties of undefined (reading 'pathname') can't figure out
- React Warning eliminate Warning: Each child in a list should have a unique "key" prop
- Active dots class on Slick Slider with ReactJS
- Access hash params in React ( /callback#token=1234&...etc)
- What are disadvantages to using immutable state in React?
- How can I apply classNames in react to change the background color of one of the child div in React
- React calling another component
- React setState not updating checkbox checked state
- How do I get redux to add a contact to my contacts state object?
- How can I pass a variable from 'outside' to a react app?
- replacing moment data with date-fns
- Is there any solution for getting current domain name by Reactjs?
- How to debounce search function in this React Component?
- Is there a React lifecycle method to do something only when component receive props the first time?
- Property is "Display" incompatible with index signature typescript react error
- how to send value one component to another component in react js?
- Using event.target with React components
- ReactJS componentDidMount does not behave as expected with Bootstrap
- React - Enzyme mount throwing regeneratorRuntime is not defined error
- Disable-devtool in Next.js
- Struggling with promises and async functions in React
- Why use Redux over Facebook Flux?
- Destructuring data in state from external file in React