pagination and react-bootstrap

Question

I am trying react-bootstrap.

I want to paginate like that with the component Pagination here .

My code is :

<Pagination size="sm">
  <Pagination.First />
  <Pagination.Prev />
     { () => {for(let page=1;page<meta.last_page;page++){
        return <Pagination.Item>{page}</Pagination.Item>
     }}}
  <Pagination.Next />
  <Pagination.Last />
</Pagination>

I have this error :

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render

How to loop to display the component Pagination ?

windmaomao · Accepted Answer · 2021-09-03 16:49:48Z

1

Just by looking at your syntax. you can't use a function to display an element. Basically all elements needs to be displayed directly without that outter () =>

  {items.map((item) => {
    return ...
  })}

Use this to replace your piece. Sometimes you might want to add a container to it, such as Fragment.

  <>
    ... // list of items
  </>

answered Sep 3, 2021 at 16:49

windmaomao

7,7322 gold badges37 silver badges38 bronze badges

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

2 Comments

Dom Over a year ago

ok thanks for the explanation. But in the case of a loop "for". How to write this ?

windmaomao Over a year ago

essentially we are doing a loop, but for is not good here, since you need an array of items back. So if you need a for, you need to create an array object first. ex. let a = [] and then go add item via a.push(item) and so forth.

Collectives™ on Stack Overflow

pagination and react-bootstrap

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related