0

I have added a react pagination in my react application. in there I have some data along with checkboxes ( which are by default selected ). When I click on final submit button without making any change ( without selecting or deselecting checkboxes as all are by default selected ), it is submitting values of checkboxes from page 1 only and not from other pages.

For Ex.

Page 1 contains

checkbox1 checkbox2 checkbox3

Page 2 contains

checkbox 4 checkbox 5

On final submit button on the form I want to submit values of all the checkboxes which are selected.

I tried below code

let selectedItems = []; 
const allCheckboxes = document.getElementsByName('items'); 
for( let i = 0; i < allCheckboxes.length; i++) {
    if(allCheckboxes[i].checked) {
        selectedItems.push( allCheckboxes[i].value );
    } }

on printing selectedItems..I am getting values which are present on page 1 of pagination

Any help is appreciated. Thanks in advance

Mayuresh Haridas
  • 13
  • 3
  • Could it be that checkboxes from other pages are not rendered, I was thinking why couldn't the state be used to get the values – Azzy Dec 30 '22 at 10:36
  • You cannot access values of inputs which are not rendered, you should have a state somewhere higher in the component tree and update it with the values of each page – NirG Dec 30 '22 at 10:38
  • Azzy and NirG..thank you for your comments. That helped me a lot. It helped to fix the issue by storing those values in state when page loads ( in useEffect ). – Mayuresh Haridas Dec 30 '22 at 13:56

0 Answers0