Recently, I encountered an issue while using NodeJS with React. I was unable to find any npm module or code snippet that could help me implement pagination for a list of job results.
I have a variable named "jobs" which stores a list of job advertisements. In my render function, I utilize:
{this.state.jobs.map(this.renderClass)}
This method maps each job with a specific function called renderClass.
The renderClass function includes the rendering of:
<section key={c.id} className="panel panel-featured-left panel-featured-primary">
<Link to={'/job/'+c.id}>
<div className="panel-body">
<div className="widget-summary">
<div className="widget-summary-col widget-summary-col-icon">
<div className="summary-icon">
<img src={image} className="img-responsive" />
</div>
</div>
<div className="widget-summary-col">
<div className="summary">
<h4 className="title">{c.company}</h4>
<div className="info">
<strong className="amount"></strong><br/>
<p><i className="fa fa-map-marker"></i> {c.location}</p>
<p><i className="fa fa-suitcase"></i> {c.position}</p>
</div>
</div>
<div className="summary-footer">
<a className="text-muted text-uppercase"><i className="fa fa-calendar"></i> {day}/{month}/{year}</a>
</div>
</div>
</div>
</div>
</Link>
</section>
While this generates a long list of job items, I am looking to add pagination for easier navigation. Can anyone guide me on how to achieve this?
Thank you!