0

We are on 1st page , so i have selected allon2nd page selected allagain goning back to 1st page, now check boxes are clearedagain going to 2nd page , check boxes are cleared

enter image description here enter image description here

I want to ask , how to keep save the id's of the check boxes in a state , and whenever i switched back to first page it automatically search the element with id and mark check boxes automatically.

and if i unmark the checkbox , it deletes the id from the state.

i am able to think about the logic , but cant able to code,it

Small help ,will leads to solve this problem

While switching to other pages, i am succesfully saving the data ,by updating the state

`

            // push all the unique objects (combination of previous state of selectedPayments and data from list)
            setSelectedPayments((prevState) => {
                var arr = [...prevState, ...list];
                var newState = [
                    ...new Map(arr.map((item) => [item.id, item])).values(),
                ];
                return newState;
            });
            console.log('Selected payments are', selectedPayments);

`

Also , removing the objects , if again the checkbox is unchecked ,and updating the state `

            // pull all the objects , which got unChecked
            setSelectedPayments((prevState) => {
                var newState = prevState.filter(function (objFromA) {
                    return !list.find(function (objFromB) {
                        return objFromA.id === objFromB.id;
                    });
                });
                return newState;
            });

`

Only facing issue with keeping track of the checked boxes, i have implimented this, this is keeping track of main(parent checkbox). How to extract the ids saved and check the checkboxes when we naviagete from one page to another

`

        let elementId = e.target.id;
        if (selectedBoxes.includes(elementId)) {
            const newArray = selectedBoxes.filter((e) => e !== elementId);
            setSelectedBoxes(newArray);
        } else {
            setSelectedBoxes((prevState) => {
                return [...prevState, elementId];
            });
        }

`

Chandan Nick
  • 31
  • 1
  • 7
  • what table component are you using? Update your question with checkbox on table code. – Arjun Dec 31 '22 at 12:53
  • Added my table code.. – Chandan Nick Dec 31 '22 at 15:20
  • Store the data you require in a data store such as Mobx/redux, or use the React Context provider. – Peppermintology Dec 31 '22 at 15:24
  • So you have a list array in state. You can maintain a `isChecked` property in list item and set `checked={item.isChecked}` in the `` element. – Arjun Dec 31 '22 at 16:03
  • @Arjun It's a good idea, I have modified the response json and added isChecked = false, and whenever I check mark the all box, I am setting the isChecked true in selectedPayment state, and comapring both array to set the list array isChecked true, but problem is when ever I navigate from one page to another my response json again came and set the list state to it's defaults false, at this time my selected Payment state have isChecked true. As check box is getting mark based on isChecked from list. When navigating it is getting reset. – Chandan Nick Dec 31 '22 at 23:47
  • @Arjun now I am trying to set the checkbox, based on selectedPayment.find((e) => return e.id === item.id) ,,, and it's working, now I can see the checkbox selected when navigating , but again facing new problem, when I am unchecking the objects from selectedPayment array got deleted, but my checkboxes are still marked, untill I switch to another page and come back again – Chandan Nick Dec 31 '22 at 23:48
  • 1
    In the first comment you added, don't put `defaultValue` for `isChecked` as false. instead, search from `selectedPayments` and put `true` or `false`. It'll be working fine even if you change the page and api refetched. – Arjun Jan 01 '23 at 08:29
  • @Arjun thank bro , for guiding me , a good help always leds to solve the problem , i am attaching my solution. How i solve this problem. Better solution always welcomes, or any others fast javascript method to find in O(1) . – Chandan Nick Jan 02 '23 at 04:34

1 Answers1

0

First i modified the Res Json , so that it set's a property isSelected = true, by comparing the element from the selectedPayments enter image description here

inAll check handler , i set the selectedPayments like this enter image description here

And render using this enter image description here

This is how ,i solved this problem.

** Better and improved answers are always welcome, please share your views.

Chandan Nick
  • 31
  • 1
  • 7