React component state do not change after setting it on button click

Question

I'm Still learning react hooks so bear with me; I'm writing a custom server side pagination component; then for loop through the pages to render them like so :

const [activePageNumber, setActivePageNumber] = useState(1);

   for (var i = 1; i <= pages; i++) {
      if (activePageNumber > 0 && i == activePageNumber)
        rows.push(
          <li
            key={i}
            className="paginate_button page-item active"
            onClick={() => {
              setActivePageNumber(i);
              console.log(activePageNumber);
            }}
          >
            <a className="page-link">{i}</a>
          </li>
        );
      else
        rows.push(
          <li
            key={i}
            className="paginate_button page-item"
            onClick={() => {
              setActivePageNumber(i);
              console.log(activePageNumber);
            }}
          >
            <a className="page-link">{i}</a>
          </li>
        );
    }

and the jsx as following :

<ul className="pagination">
    {rows}
</ul>

the server returning 4 pages and they got rendered properly on the screen; however the problem is whenever I click any page button activePageNumber is always 1 its not changed at all.

score 0 · Accepted Answer · answered Jul 06 '21 at 12:07

0

You are building the entire html outside of return, so i will always default to last number for every li element in the rows list when you try to render it inside your ul

Instead you should add all this logic inside your return statement.

Have a look at this sandbox

answered Jul 06 '21 at 12:07

Apostolos

10,033
5
24
39

So its safe to remove the for and replace it with [...Array(12).keys()] instead ? – Voice Of The Rain Jul 06 '21 at 13:09
it is safe but you need to add this code inside your return statement, not outside. this is the key part, check the sandbox to see how it is called. – Apostolos Jul 06 '21 at 13:10
I have no idear what this code is doing! [...Array(pages).keys()] .map((a) => a + 1) .map((idx) => – Voice Of The Rain Jul 06 '21 at 13:10
1

it creates an array of 0,1,2,3,4... and then it maps it to 1,2,3,4,5 in order to start from 1 not zero. just js fun :) – Apostolos Jul 06 '21 at 13:11
it worked thanks; maybe this is another question I'm calling a function on a parent component to re-render a table data activePageNumber become 1 again ! – Voice Of The Rain Jul 06 '21 at 13:56
didnt understand what you said actually. can you add a sandbox? thnx! – Apostolos Jul 06 '21 at 13:57

React component state do not change after setting it on button click

1 Answers1