OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Pagination tabs undergoes infinite loop

  • Thread starter Thread starter Ankit Verma
  • Start date Start date
A

Ankit Verma

Guest
I want to achieve working pagination tabs something like this.

The ui has been achieved but not working

I have an application which fetches news from newapi.org and displaying on screen.

My News Page looks like this

Code:
import React, { Component } from 'react'
import NewsItem from '../components/NewsItem';
import { Col, Row, Stack } from 'react-bootstrap';
import PageTabs from './PageTabs';

export default class News extends Component {

  constructor(){
    super();
    this.state = {articles:[],currentPage:0,loading:true};
  }

  async componentDidMount(){
    let url = process.env.REACT_APP_BASE_URL_EVERYTHING;
    let data = await fetch(url);
    let parsedData = await data.json();
  
    this.setState(
      { articles:parsedData.articles.filter((elem)=>elem.title!='[Removed]' && elem.urlToImage!=null),
        currentPage:1,
        totalPage: Math.ceil(parsedData.totalResults/100),
        loading:false}
    );
  }
  
  render() {
    const onPageChange = (num)=>{
      if(num != this.state.currentPage){
            this.setState({
              ...this.state,
              currentPage:num
            });
          }
    }
    return (
      <>
        {
          this.state.loading?<div className="spinner-border" role="status">
          <span className="visually-hidden">Loading...</span>
        </div> :
          <Stack>
            <Row>  
                {this.state.articles.map((elem)=>{
                  return (
                    <Col md={6} lg={4} key={elem.title} >
                      <NewsItem title={elem.title} description={elem.description} url={elem.url} image={elem.urlToImage}/>
                    </Col>
                  );
                  })}         
            </Row>
            <PageTabs totalPages={this.state.totalPage} currentIndex={this.state.currentPage} onTabClick={onPageChange}/>
          </Stack>
        }
      </>
    )
  }
}

It holds the news item and below that is the pagination tabs.

The PageTabs component looks like this

Code:
import React, { Component } from 'react'
import { Pagination } from 'react-bootstrap';

export default class PageTabs extends Component {

    constructor(){
        super();
        this.state = {
            startIndex : 0
        }
    }

  render() {
    let {totalPages, activeIndex , onTabClick} = this.props;
    console.log('Total page ',totalPages);
    console.log('Curent ',activeIndex);
    console.log('Funct ',onTabClick);

    // Needs to be sliced
    let items = []; 
    for (let number = 1; number <= totalPages; number++) { 
      items.push(
        <Pagination.Item 
          key={number} 
          active={number === activeIndex} 
          onClick={onTabClick(number)}>
          {number}
        </Pagination.Item>
      );
    }

    let tabsToShow = items.slice(this.state.startIndex , this.state.startIndex+10);

    return (
    <Pagination>
        <Pagination.First onClick={()=>{ this.setState({startIndex : 0}) }}/>
        <Pagination.Prev onClick={()=>{ this.setState({startIndex : this.state.startIndex-10}) }}/>
        
        <Pagination.Ellipsis />
        {tabsToShow}
        <Pagination.Ellipsis />

        <Pagination.Next onClick={()=>{ this.setState({startIndex : this.state.startIndex+10}) }}/>
        <Pagination.Last onClick={()=>{ this.setState({startIndex : totalPages-10}) }}/>
    </Pagination>
    )
  }
}

The issue is when I start the server the render method gets called infinitely as the console gets flooded with the logs provided in the render method of PageTabs component. What is the exact issue?

<p>I want to achieve working pagination tabs something like this.</p>
<p><a href="https://i.sstatic.net/cc9LG6gY.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/cc9LG6gY.png" alt="The ui has been achieved but not working" /></a></p>
<p>I have an application which fetches news from newapi.org and displaying on screen.</p>
<p>My News Page looks like this</p>
<pre><code>import React, { Component } from 'react'
import NewsItem from '../components/NewsItem';
import { Col, Row, Stack } from 'react-bootstrap';
import PageTabs from './PageTabs';

export default class News extends Component {

constructor(){
super();
this.state = {articles:[],currentPage:0,loading:true};
}

async componentDidMount(){
let url = process.env.REACT_APP_BASE_URL_EVERYTHING;
let data = await fetch(url);
let parsedData = await data.json();

this.setState(
{ articles:parsedData.articles.filter((elem)=>elem.title!='[Removed]' && elem.urlToImage!=null),
currentPage:1,
totalPage: Math.ceil(parsedData.totalResults/100),
loading:false}
);
}

render() {
const onPageChange = (num)=>{
if(num != this.state.currentPage){
this.setState({
...this.state,
currentPage:num
});
}
}
return (
<>
{
this.state.loading?<div className="spinner-border" role="status">
<span className="visually-hidden">Loading...</span>
</div> :
<Stack>
<Row>
{this.state.articles.map((elem)=>{
return (
<Col md={6} lg={4} key={elem.title} >
<NewsItem title={elem.title} description={elem.description} url={elem.url} image={elem.urlToImage}/>
</Col>
);
})}
</Row>
<PageTabs totalPages={this.state.totalPage} currentIndex={this.state.currentPage} onTabClick={onPageChange}/>
</Stack>
}
</>
)
}
}
</code></pre>
<p>It holds the news item and below that is the pagination tabs.</p>
<p>The PageTabs component looks like this</p>
<pre><code>import React, { Component } from 'react'
import { Pagination } from 'react-bootstrap';

export default class PageTabs extends Component {

constructor(){
super();
this.state = {
startIndex : 0
}
}

render() {
let {totalPages, activeIndex , onTabClick} = this.props;
console.log('Total page ',totalPages);
console.log('Curent ',activeIndex);
console.log('Funct ',onTabClick);

// Needs to be sliced
let items = [];
for (let number = 1; number <= totalPages; number++) {
items.push(
<Pagination.Item
key={number}
active={number === activeIndex}
onClick={onTabClick(number)}>
{number}
</Pagination.Item>
);
}

let tabsToShow = items.slice(this.state.startIndex , this.state.startIndex+10);

return (
<Pagination>
<Pagination.First onClick={()=>{ this.setState({startIndex : 0}) }}/>
<Pagination.Prev onClick={()=>{ this.setState({startIndex : this.state.startIndex-10}) }}/>

<Pagination.Ellipsis />
{tabsToShow}
<Pagination.Ellipsis />

<Pagination.Next onClick={()=>{ this.setState({startIndex : this.state.startIndex+10}) }}/>
<Pagination.Last onClick={()=>{ this.setState({startIndex : totalPages-10}) }}/>
</Pagination>
)
}
}
</code></pre>
<p>The issue is when I start the server the render method gets called infinitely as the console gets flooded with the logs provided in the render method of PageTabs component.
What is the exact issue?</p>
 

Latest posts

A
Replies
0
Views
1
Ashrik Ahamed
A
A
Replies
0
Views
1
Ashrik Ahamed
A

Online statistics

Members online
1
Guests online
3
Total visitors
4
Top