Menu
I am following this tutorial
https://nickymeuleman.netlify.com/blog/gatsby-pagination#navigate-to-previousnext-page
Everything is working fine, but I am unable to add const within the class. I am using VSC to code up the site, it just doesn't seem to like it.
This is the class I am trying to place the consts within. As I am new to React I am bit lost on finding a solution without using a plugin.
export default class PostList extends React.Component {
render() {
const posts = this.props.data.allMarkdownRemark.edges
return (
<Layout>
<Head title="Posts" />
<div className={layoutStyles.pageHeader}>
<h2>Posts</h2>
<span>Just my ramberlings</span>
</div>
{posts.map(({ node }) => {
const title = node.frontmatter.title || node.fields.slug
return (
<div className={postPageStyles.postItem}>
<div className={postPageStyles.postItemTitle}>
<h2>{title}</h2>
<span>Posted on {node.frontmatter.date}</span>
</div>
<div>
<p>{node.excerpt}</p>
<Link to={`${node.fields.slug}`}>
<span>Continue Reading</span>
<span role="img"> 👉🏼</span>
</Link>
</div>
</div>
)
})}
</Layout>
)
}
}
637
You cannot indeed use const in a class "just like that":
class App extends React.Component {
const a = 2 // will throw a syntax error
render(){
return <div>Hello World</div>
}
What you can do is either not use a const to declare the variable as a class field:
class App extends React.Component {
a = "john";
render(){
//now you can access a via `this`
return <div>{`Hello ${this.a}`}</div>
}
Or if you don't need it to be to be somehow "bound" to your component, you can declare it outside of the class.
const a = "john"
class App extends React.Component {
render(){
//you can simply access `a`
return <div>{`Hello ${a}`}</div>
}
answered Dec 07 '25 09:12
I have managed to resolve this. After much googling.
const PostList = props => {
const { currentPage, numPages } = props.pageContext
const isFirst = currentPage === 1
const isLast = currentPage === numPages
const prevPage = currentPage - 1 === 1 ? '/' : (currentPage - 1).toString()
const nextPage = (currentPage + 1).toString()
const posts = props.data.allMarkdownRemark.edges
return (
<Layout>
<Head title="Posts" />
<div className={layoutStyles.pageHeader}>
<h2>Posts</h2>
<span>Just my ramberlings</span>
</div>
{posts.map(({ node }) => {
const title = node.frontmatter.title || node.fields.slug
return (
<div className={postPageStyles.postItem}>
<div className={postPageStyles.postItemTitle}>
<h2>{title}</h2>
<span>Posted on {node.frontmatter.data}</span>
</div>
<div>
<p>{node.excerpt}</p>
<Link to={`${node.fields.slug}`}>
<span>Continue Reading</span>
<span role="img"> 👉🏼</span>
</Link>
</div>
</div>
)
})}
{!isFirst && (
<Link to={prevPage} rel="prev">
← Previous Page
</Link>
)}
{!isLast && (
<Link to={nextPage} rel="next">
Next Page →
</Link>
)}
{Array.from({ length: numPages }, (_, i) => (
<Link
key={`pagination-number${i + 1}`}
to={`posts/${i === 0 ? '' : i + 1}`}
>
{i + 1}
</Link>
))}
</Layout>
)
}
export default PostList
To use the consts I had to change
const PostList = ({ data }) => {
const posts = data.allMarkdownRemark.edges
...
to
const PostList = props => {
const posts = props.data.allMarkdownRemark.edges
which then allowed me to use const { currentPage, numPages } = props.pageContext
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With