Issue with page number

Question

I have an application where I use a click counter.

const App = () => { const [nr, setNr] = useState(1); return ( <div> <p>{nr}</p> <Pagination defaultCurrent={nr} total={50} /> <button onClick={() => setNr(nr + 1)}>click</button> </div> ); };

Depending on the value the defaultCurrent should change in my Pagination component, but it is not working even the values are changing. Why the pages don't change when I click on the counter?

Demo: https://codesandbox.io/s/basic-ant-design-demo-ni423?file=/Test.js:183-386

The sandbox has an error. You're not rendering the button and p — gqstav
– gqstav, Commented Apr 17, 2020 at 8:15
@palaѕн, but why after i click on the button click (for example till 3), and after that if i click on the button 1 , the active also still and 3? — Asking
– Asking, Commented Apr 17, 2020 at 8:50

Dennis Vash · Accepted Answer · 2020-04-17 08:52:53Z

1

defaultCurrent is only initialized on mount, therefore you should use the current property.

See example:

Pagination docs.

edited Apr 17, 2020 at 8:52

answered Apr 17, 2020 at 8:19

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Asking Over a year ago

but why after i click on the button click (for example till 3), and after that if i click on the button 1 , the active also still and 3?

Dennis Vash Over a year ago

I added a codesandbox to the answer, check it, you should use onChange for it to work

Asking Over a year ago

Ok, i will accept your ansewr, but could you take a look on my another question, please? stackoverflow.com/questions/61265277/solve-pagination-issues/…

gqstav · Accepted Answer · 2020-04-17 08:18:06Z

You should use current prop:

const App = () => { const [nr, setNr] = useState(1); return ( <div> <p>{nr}</p> <Pagination current={nr} total={50} /> <button onClick={() => setNr(nr + 1)}>click</button> </div> ); };

but why after i click on the button click (for example till 3), and after that if i click on the button 1 , the active also still and 3?

Collectives™ on Stack Overflow

Issue with page number

2 Answers 2

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Linked

Related